/** * WP Moz — Single Plugin Product Page Styles * FILE: your-theme/assets/css/wpmoz-single-product.css * * ENQUEUED IN: functions.php (see snippet at bottom of this file) * LOADS ON: Single WooCommerce product pages only * * DESIGN TOKENS: * All colours use CSS variables defined in main.css / header.php. * Dark mode works automatically via [data-dark] selector on . * DO NOT hardcode colours — use var(--orange), var(--text), etc. * * ───────────────────────────────────────────────────────────── * SECTION MAP: * 1. Page shell & breadcrumb * 2. Product grid (gallery + summary columns) * 3. Gallery block * 4. Summary: category badge, title, rating * 5. Price block * 6. Stock pill * 7. Short description * 8. Trust pills * 9. Variation selector (variable products) * 10. Cart row: qty stepper, ATC, Buy Now, wishlist * 11. Meta block (SKU, category, tags, docs) * 12. Share buttons * 13. Tabs (pills + panels) * 14. Additional Info table * 15. Reviews list + review form * 16. Related products grid * 17. Responsive breakpoints * 18. WooCommerce overrides (star rating form, notices) * ───────────────────────────────────────────────────────────── * * TO ADD TO functions.php: * * add_action( 'wp_enqueue_scripts', function() { * if ( is_singular( 'product' ) ) { * wp_enqueue_style( * 'wpmoz-single-product', * get_template_directory_uri() . '/assets/css/wpmoz-single-product.css', * [ 'wpmoz-main' ], * '1.0.0' * ); * } * } ); */ /* ══════════════════════════════════════════════════════════════ 1. PAGE SHELL & BREADCRUMB ══════════════════════════════════════════════════════════════ */ .wc-product-page { max-width: 1240px; margin: 0 auto; padding: 56px 28px 100px; } .wc-breadcrumb { font-size: 12px; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.05em; color: var(--text3); margin-bottom: 36px; display: flex; align-items: center; gap: 6px; } .wc-breadcrumb a { color: var(--text2); transition: color 0.2s; } .wc-breadcrumb a:hover { color: var(--orange); } /* ══════════════════════════════════════════════════════════════ 2. PRODUCT GRID ══════════════════════════════════════════════════════════════ */ .wc-product-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; } /* ══════════════════════════════════════════════════════════════ 3. GALLERY ══════════════════════════════════════════════════════════════ */ .wc-gallery { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); /* position: sticky; */ top: calc(var(--nav-h) + 24px); } .wc-gallery-main { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); background: var(--bg2); } .wc-gallery:hover .wc-gallery-main { transform: scale(1.03); } .wc-gallery-sale-badge { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--orange), var(--orange-light)); color: #fff; padding: 6px 14px; border-radius: 100px; box-shadow: var(--shadow-orange); } .wc-gallery-zoom-btn { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; background: var(--surface2); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); cursor: pointer; font-size: 17px; transition: var(--transition); } .wc-gallery-zoom-btn:hover { border-color: var(--orange); } .wc-gallery-thumbs { display: flex; gap: 8px; padding: 12px; background: var(--bg2); border-top: 1px solid var(--border); } .wc-gallery-thumbs img { flex: 1; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; aspect-ratio: 1/1; object-fit: cover; transition: border-color 0.2s, transform 0.2s; } .wc-gallery-thumbs img.active, .wc-gallery-thumbs img:hover { border-color: var(--orange); transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════════ 4. SUMMARY: BADGE, TITLE, RATING ══════════════════════════════════════════════════════════════ */ .wc-summary { display: flex; flex-direction: column; gap: 0; } .wc-cat-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; background: var(--orange-soft); border: 1px solid var(--orange-cream); margin-bottom: 16px; width: fit-content; } .wc-title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 800; color: var(--text); line-height: 1.15; margin-bottom: 12px; letter-spacing: -0.02em; } .wc-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .wc-stars { color: var(--orange); font-size: 16px; letter-spacing: 2px; } .wc-review-count { font-size: 12px; color: var(--text3); font-family: var(--font-mono); } /* ══════════════════════════════════════════════════════════════ 5. PRICE BLOCK ══════════════════════════════════════════════════════════════ */ .wc-price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; padding: 20px 24px; background: var(--orange-soft); border: 1px solid var(--orange-cream); border-radius: var(--radius); } /* Strip WooCommerce's default / wrappers */ .wc-price-block ins { text-decoration: none; } .wc-price-block del { opacity: 1; } .wc-price-now { font-family: var(--font-mono); font-size: 32px; font-weight: 800; color: var(--orange); letter-spacing: -0.02em; } .wc-price-was { font-family: var(--font-mono); font-size: 17px; color: var(--text3); text-decoration: line-through; } .wc-sale-pill { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--orange), var(--orange-light)); color: #fff; padding: 4px 10px; border-radius: 100px; box-shadow: var(--shadow-orange); white-space: nowrap; } /* ══════════════════════════════════════════════════════════════ 6. STOCK PILL ══════════════════════════════════════════════════════════════ */ .wc-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 20px; } .wc-stock--instock { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-cream); } .wc-stock--instock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); } .wc-stock--outofstock { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); } /* ══════════════════════════════════════════════════════════════ 7. SHORT DESCRIPTION ══════════════════════════════════════════════════════════════ */ .wc-short-desc { font-size: 15px; line-height: 1.8; color: var(--text2); margin-bottom: 28px; } .wc-short-desc p { margin-bottom: 12px; } .wc-short-desc p:last-child { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════ 8. TRUST PILLS ══════════════════════════════════════════════════════════════ */ .wc-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .wc-trust-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; font-family: var(--font-mono); padding: 6px 14px; border-radius: 100px; background: var(--surface); border: 1px solid var(--border); color: var(--text2); } .wc-trust-pill .ti { color: var(--green); } /* ══════════════════════════════════════════════════════════════ 9. VARIATION SELECTOR (Variable products) ══════════════════════════════════════════════════════════════ */ .wpmoz-variation-form { margin-bottom: 20px; } .wpmoz-variations-table { border: none; width: auto; } .wpmoz-variations-table td { padding: 4px 0; } .wpmoz-variations-table .label { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); padding-right: 12px; white-space: nowrap; } .wpmoz-variations-table select { padding: 10px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; color: var(--text); background: var(--surface); outline: none; cursor: pointer; min-width: 200px; transition: border-color 0.2s; } .wpmoz-variations-table select:focus { border-color: var(--orange); } /* ══════════════════════════════════════════════════════════════ 10. CART ROW (Qty, ATC, Buy Now, Wishlist) ══════════════════════════════════════════════════════════════ */ .wpmoz-cart-form { margin-bottom: 12px; } .wc-cart-row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } /* Qty stepper */ .wc-qty { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 100px; overflow: hidden; background: var(--surface); height: 50px; transition: border-color 0.2s; } .wc-qty:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.08); } .wc-qty-btn { width: 44px; height: 100%; background: transparent; border: none; cursor: pointer; font-size: 20px; font-weight: 700; color: var(--text2); display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; line-height: 1; } .wc-qty-btn:hover { color: var(--orange); background: var(--orange-soft); } .wc-qty-input { width: 48px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 16px; border: none; background: transparent; color: var(--text); outline: none; -moz-appearance: textfield; appearance: textfield; } .wc-qty-input::-webkit-inner-spin-button, .wc-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; } /* Add to cart button */ .wc-atc, .single_add_to_cart_button { flex: 1; min-width: 160px; height: 50px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; font-family: var(--font-body) !important; border-radius: 100px; padding: 0 28px; background: linear-gradient( 135deg, var(--orange), var(--orange-light) ) !important; color: #fff !important; box-shadow: var(--shadow-orange); border: none !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition); position: relative; overflow: hidden; text-transform: none !important; } .wc-atc::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); opacity: 0; transition: opacity 0.2s; } .wc-atc:hover, .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(249, 115, 22, 0.4) !important; } .wc-atc:hover::after { opacity: 1; } .wc-atc:active { transform: translateY(0); } /* Buy Now button — distinct green style */ .wc-buy-now-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; font-size: 15px; font-weight: 700; font-family: var(--font-body); border-radius: 100px; padding: 0 28px; background: linear-gradient(135deg, var(--green), var(--green-light)); color: #fff; box-shadow: var(--shadow-green); border: none; cursor: pointer; transition: var(--transition); margin-bottom: 16px; } .wc-buy-now-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(34, 197, 94, 0.35); } .wc-buy-now-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Demo link */ .wc-demo-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; font-family: var(--font-mono); color: var(--orange); padding: 8px 18px; border-radius: 100px; border: 1.5px solid var(--orange-cream); transition: var(--transition); margin-bottom: 20px; width: fit-content; } .wc-demo-link:hover { background: var(--orange-soft); } /* Wishlist button */ .wc-wish-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: var(--transition); color: var(--text2); } .wc-wish-btn:hover { border-color: #ef4444; color: #ef4444; transform: scale(1.08); } /* Out of stock message */ .wc-out-of-stock { font-size: 14px; color: var(--text3); font-family: var(--font-mono); padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 20px; } /* ══════════════════════════════════════════════════════════════ 11. META BLOCK ══════════════════════════════════════════════════════════════ */ .wc-meta { padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text3); display: flex; flex-direction: column; gap: 8px; line-height: 1.6; } .wc-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .wc-meta-label { color: var(--text2); font-weight: 700; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; min-width: 90px; } .wc-meta-val { font-family: var(--font-mono); font-size: 12px; color: var(--orange); } .wc-meta a { color: var(--orange); font-family: var(--font-mono); font-size: 12px; transition: opacity 0.2s; } .wc-meta a:hover { opacity: 0.7; } /* ══════════════════════════════════════════════════════════════ 12. SHARE BUTTONS ══════════════════════════════════════════════════════════════ */ .wc-share { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .wc-share-label { font-size: 11px; font-weight: 700; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); } .wc-share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text2); cursor: pointer; transition: var(--transition); } .wc-share-btn:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); } .wc-share-btn.copied { border-color: var(--green); color: var(--green); } /* ══════════════════════════════════════════════════════════════ 13. TABS (pills + panels) ══════════════════════════════════════════════════════════════ */ .wc-tabs-section { margin-top: 72px; grid-column: 1 / -1; } .wc-tab-pills { display: flex; gap: 4px; list-style: none; padding: 4px; margin: 0 0 32px; background: var(--bg2); border-radius: 100px; width: fit-content; border: 1px solid var(--border); } .wc-tab-pill a { display: block; padding: 10px 22px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text2); border-radius: 100px; transition: var(--transition); white-space: nowrap; } .wc-tab-pill.active a { background: var(--surface); color: var(--orange); box-shadow: var(--shadow); } .wc-tab-pill a:hover { color: var(--orange); } .wc-tab-panel { font-size: 15px; line-height: 1.85; color: var(--text2); max-width: 820px; display: none; } .wc-tab-panel.active { display: block; } .wc-tab-panel h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 20px; } .wc-tab-panel p { margin-bottom: 16px; } .wc-tab-panel ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; } .wc-tab-panel li { margin-bottom: 8px; } .wc-description-content h2, .wc-description-content h3 { font-family: var(--font-display); font-weight: 800; color: var(--text); margin: 28px 0 12px; } .wc-description-content img { border-radius: var(--radius-sm); } .wc-no-content { color: var(--text3); font-family: var(--font-mono); font-size: 13px; } /* ══════════════════════════════════════════════════════════════ 14. ADDITIONAL INFO TABLE ══════════════════════════════════════════════════════════════ */ .wc-attr-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; font-size: 14px; } .wc-attr-table th { background: var(--bg2); padding: 14px 20px; font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text2); border-bottom: 1px solid var(--border); width: 200px; text-align: left; } .wc-attr-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--text); } .wc-attr-table tr:last-child th, .wc-attr-table tr:last-child td { border-bottom: none; } /* ══════════════════════════════════════════════════════════════ 15. REVIEWS LIST + FORM ══════════════════════════════════════════════════════════════ */ .wc-reviews { margin-top: 0; } .wc-reviews h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 28px; } .wc-review-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; } .wc-review-card { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: box-shadow 0.2s; } .wc-review-card:hover { box-shadow: var(--shadow); border-color: var(--border2); } .wc-review-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--orange-cream); background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--orange); } .wc-review-body { flex: 1; } .wc-review-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text3); margin-bottom: 12px; } .wc-review-meta strong { font-weight: 700; color: var(--text); font-size: 14px; font-family: var(--font-display); } .wc-review-stars { color: var(--orange); font-size: 13px; letter-spacing: 1px; } .wc-review-text { font-size: 14px; line-height: 1.8; color: var(--text2); } .wc-no-reviews { color: var(--text3); font-family: var(--font-mono); font-size: 13px; padding: 20px 0; } /* Review form card */ .wc-review-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; } .wc-review-form-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 24px; } /* Style WooCommerce comment form fields */ .wc-review-form-card .comment-form-rating { margin-bottom: 20px; } .wc-review-form-card .stars a { color: var(--orange); font-size: 20px; } .wc-review-form-card p { margin-bottom: 16px; } .wc-review-form-card label { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); display: block; margin-bottom: 6px; } .wc-review-form-card input[type="text"], .wc-review-form-card input[type="email"], .wc-review-form-card textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; color: var(--text); background: var(--bg); outline: none; transition: border-color 0.2s; } .wc-review-form-card input:focus, .wc-review-form-card textarea:focus { border-color: var(--orange); } .wc-review-form-card textarea { min-height: 120px; resize: vertical; } .wc-review-submit-btn, .wc-review-form-card .submit { padding: 13px 28px; background: linear-gradient(135deg, var(--orange), var(--orange-light)); color: #fff; border: none; border-radius: 100px; font-family: var(--font-body); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-orange); transition: var(--transition); } .wc-review-submit-btn:hover, .wc-review-form-card .submit:hover { transform: translateY(-2px); } .wc-reviews-closed { color: var(--text3); font-size: 13px; font-family: var(--font-mono); padding: 16px; background: var(--bg2); border-radius: var(--radius-sm); } /* ══════════════════════════════════════════════════════════════ 16. RELATED PRODUCTS ══════════════════════════════════════════════════════════════ */ .wc-related { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--border); grid-column: 1 / -1; } .wc-related h2 { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: var(--text); margin-bottom: 32px; letter-spacing: -0.02em; } .wc-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .wc-related-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; } .wc-related-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border2); } .wc-related-img-wrap { overflow: hidden; display: block; } .wc-related-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.4s ease; background: var(--bg2); } .wc-related-no-img { font-size: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg2); } .wc-related-card:hover .wc-related-img { transform: scale(1.04); } .wc-related-info { padding: 16px 16px 0; flex: 1; } .wc-related-info h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 6px; line-height: 1.35; } .wc-related-info h3 a { color: var(--text); transition: color 0.2s; } .wc-related-info h3 a:hover { color: var(--orange); } .wc-related-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--orange); margin-bottom: 12px; } /* Strip WooCommerce / in price */ .wc-related-price ins { text-decoration: none; } .wc-related-btn { margin: 0 16px 16px; font-size: 13px; padding: 10px 20px; border-radius: 100px; background: linear-gradient(135deg, var(--orange), var(--orange-light)); color: #fff; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; transition: var(--transition); box-shadow: var(--shadow-orange); text-align: center; } .wc-related-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.35); color: #fff; } /* ══════════════════════════════════════════════════════════════ 17. RESPONSIVE BREAKPOINTS ══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .wc-product-grid { column-gap: 40px; } } @media (max-width: 900px) { .wc-product-grid { grid-template-columns: 1fr; column-gap: 0; } .wc-gallery { position: static; } .wc-summary { margin-top: 32px; } .wc-related-grid { grid-template-columns: repeat(2, 1fr); } .wc-tab-pills { border-radius: var(--radius); width: 100%; flex-wrap: wrap; } .wc-tab-pill a { padding: 8px 14px; } } @media (max-width: 600px) { .wc-product-page { padding: 32px 16px 80px; } .wc-atc, .wc-buy-now-btn { width: 100%; } .wc-cart-row { flex-wrap: wrap; } .wc-qty { width: 100%; justify-content: center; } .wc-review-form-card { padding: 24px; } } @media (max-width: 480px) { .wc-related-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════ 18. WOOCOMMERCE CORE OVERRIDES Resets WooCommerce default styles that conflict with ours. ══════════════════════════════════════════════════════════════ */ /* Remove WooCommerce default product breadcrumb (we use our own) */ .woocommerce-breadcrumb { display: none !important; } /* Remove WooCommerce default single product title and price (we output them) */ .woocommerce div.product .product_title, .woocommerce div.product p.price, .woocommerce div.product .woocommerce-product-gallery { display: none; } /* Reset WooCommerce default notices */ .woocommerce-message, .woocommerce-error, .woocommerce-info { border-radius: var(--radius-sm) !important; font-family: var(--font-body) !important; } /* Rating stars in the WooCommerce comment form */ .woocommerce .comment-form-rating .stars span a { color: var(--orange) !important; } /* Hide WooCommerce default tabs if they accidentally render */ .woocommerce-tabs { display: none !important; }