WooCommerce Custom CSS

August 7, 2025 · AI Conversations

User
Sale!

S&R Insulated VDE Diagonal Side Cutter/Electrical Wire Cutters 160mm 1000V €59.99 Original price was: €59.99.€49.99Current price is: €49.99.

S&R Insulated VDE Diagonal Side Cutter/Electrical Wire Cutters 160mm 1000V  quantity

Add to cart

Categories: FIXTURES & FITTINGS, TOOLS

Reviews (0)

Reviews

There are no reviews yet.

Be the first to review “S&R Insulated VDE Diagonal Side Cutter/Electrical Wire Cutters 160mm 1000V ” Cancel replyYour rating * 1 of 5 stars 2 of 5 stars 3 of 5 stars 4 of 5 stars 5 of 5 stars
Rate…
Perfect
Good
Average
Not that bad
Very poor
Your review *

<script>
(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();
</script>

Related products

Sale!
Estwing E3/24S Straight Claw Framing Hammer – Vinyl Grip,Silver,680g (24oz)
€59.99 Original price was: €59.99.€49.99Current price is: €49.99.
Add to cart

Sale!
Estwing E3/24S Straight Claw Framing Hammer – Vinyl Grip,Silver,680g (24oz)
€59.99 Original price was: €59.99.€49.99Current price is: €49.99.
Add to cart

this is my default single-product page , now give me custom css , and design it best ,
as I have attached my figma design of shop page , ypu can take same colors , and make it best !

useing monstreat font same color combination , max-width 1240px and make it responsive also , dont chnage anything in html structure only design it !

make it best !

Assistant
Here’s a **custom CSS** tailored to match the **Figma design** you've uploaded for the **WooCommerce single product page**, using:

– Montserrat font
– Color palette as seen in the Figma screenshot (red for accents, clean white background, black/gray text)
– Max width of 1240px
– Fully responsive styling
– Zero changes to the HTML structure

—

### ✅ Paste this in your theme’s `style.css` or via “Customize > Additional CSS”:

/* General Container */
.single-product .site-main {
  max-width: 1240px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  padding: 40px 20px;
  background: #fff;
}

/* Product title */
.product_title {
  font-size: 26px;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}

/* Sale badge */
.onsale {
  background-color: #e53935;
  color: #fff;
  padding: 4px 12px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 13px;
  border-radius: 3px;
  z-index: 2;
}

/* Price display */
.price {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}
.price del {
  color: #888;
  margin-right: 8px;
}
.price ins {
  color: #e53935;
  font-weight: bold;
  text-decoration: none;
}

/* Quantity & Add to Cart Button */
form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
}
form.cart .quantity input {
  width: 80px;
  height: 45px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
form.cart .single_add_to_cart_button {
  background-color: #e53935;
  color: #fff;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  transition: background 0.3s;
}
form.cart .single_add_to_cart_button:hover {
  background-color: #c62828;
}

/* Product meta (categories) */
.product_meta {
  margin-top: 20px;
  font-size: 14px;
  color: #444;
}
.product_meta a {
  color: #e53935;
  text-decoration: none;
}
.product_meta a:hover {
  text-decoration: underline;
}

/* Tabs and Reviews */
.woocommerce-tabs .tabs li {
  display: inline-block;
  margin-right: 20px;
  font-weight: bold;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs .tabs li.active {
  border-bottom-color: #e53935;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: 20px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}
.woocommerce-Reviews-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.comment-form-rating label,
.comment-form-comment label {
  font-weight: 500;
  color: #333;
}
.comment-form-comment textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

/* Related Products */
.related.products h2 {
  font-size: 22px;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 25px;
}
.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.related.products li.product {
  border: 1px solid #eee;
  padding: 20px;
  background: #fff;
  text-align: center;
  border-radius: 6px;
  transition: box-shadow 0.3s ease;
}
.related.products li.product:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.related.products .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 500;
  margin: 15px 0;
}
.related.products .price {
  font-size: 16px;
}
.related.products .button {
  background: #e53935;
  color: #fff;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
}
.related.products .button:hover {
  background: #c62828;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  form.cart {
    flex-direction: column;
    align-items: flex-start;
  }
  .product_title {
    font-size: 22px;
  }
  .woocommerce-product-gallery__wrapper img {
    max-width: 100%;
    height: auto;
  }
}

—

### ✅ Recommended Fonts:
Make sure to enqueue the **Montserrat** font in your theme’s `functions.php`:

function custom_theme_fonts() {
    wp_enqueue_style( 'montserrat-font', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_fonts' );

—

Would you like me to give you similar CSS for your **shop/archive page** from the Figma as well?

Assistant
Your CSS is already shaping up really well! Here's a set of **fine-tuned improvements** to enhance the design further to best match your Figma:

—

### ✅ Suggested Enhancements:

1. **Improve Typography & Spacing**
2. **Make “Sale” badge consistent with spacing**
3. **Align image block with title and price**
4. **Make reviews tab visually cleaner**
5. **Style `woocommerce-product-gallery` image nicely**

—

### ✅ Here’s what to add or update to your existing CSS in the canvas:

/* WooCommerce Product Gallery Image Styling */
.woocommerce-product-gallery__image img {
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}
.woocommerce-product-gallery__image img:hover {
  transform: scale(1.03);
}

/* Fix spacing between image and content */
.woocommerce-product-gallery,
.summary.entry-summary {
  display: inline-block;
  vertical-align: top;
}
.woocommerce-product-gallery {
  width: 45%;
  padding-right: 30px;
}
.summary.entry-summary {
  width: 50%;
}

/* Improve font weight for clarity */
.product_meta,
.woocommerce-Reviews-title,
.woocommerce-tabs .tabs li,
.related.products h2 {
  font-weight: 600;
}

/* Review stars */
.woocommerce-Reviews .stars a {
  color: #fbc02d;
  font-size: 18px;
}
.comment-form-rating select {
  display: none !important;
}

/* Reviews section layout */
.woocommerce-Tabs-panel--reviews {
  background: #fafafa;
  padding: 20px;
  border-radius: 4px;
}

/* "Be the first to review" font */
#reply-title.comment-reply-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* Button focus state */
button:focus, .button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.3);
}

—

Would you like to style the **breadcrumb**, **gallery slider nav arrows**, or **shop/category buttons** next, as per your Figma layout?

User
.single-product

add this class to every , as I dont want any conflict !

Assistant
Great! Here's your **updated CSS**, namespaced with the `.single-product` class **on every rule**, to prevent conflicts with other pages:

—

### ✅ Scoped and Clean `.single-product` CSS:

.single-product .site-main {
  max-width: 1240px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  padding: 40px 20px;
  background: #fff;
}

.single-product .product_title {
  font-size: 26px;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}

.single-product .onsale {
  background-color: #e53935;
  color: #fff;
  padding: 4px 12px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 13px;
  border-radius: 3px;
  z-index: 2;
}

.single-product .price {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}
.single-product .price del {
  color: #888;
  margin-right: 8px;
}
.single-product .price ins {
  color: #e53935;
  font-weight: bold;
  text-decoration: none;
}

.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
}
.single-product form.cart .quantity input {
  width: 80px;
  height: 45px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.single-product form.cart .single_add_to_cart_button {
  background-color: #e53935;
  color: #fff;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  transition: background 0.3s;
}
.single-product form.cart .single_add_to_cart_button:hover {
  background-color: #c62828;
}

.single-product .product_meta {
  margin-top: 20px;
  font-size: 14px;
  color: #444;
}
.single-product .product_meta a {
  color: #e53935;
  text-decoration: none;
}
.single-product .product_meta a:hover {
  text-decoration: underline;
}

.single-product .woocommerce-tabs .tabs li {
  display: inline-block;
  margin-right: 20px;
  font-weight: bold;
  border-bottom: 2px solid transparent;
}
.single-product .woocommerce-tabs .tabs li.active {
  border-bottom-color: #e53935;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: 20px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}
.single-product .woocommerce-Reviews-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.single-product .comment-form-rating label,
.single-product .comment-form-comment label {
  font-weight: 500;
  color: #333;
}
.single-product .comment-form-comment textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

.single-product .related.products h2 {
  font-size: 22px;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 25px;
}
.single-product .related.products ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.single-product .related.products li.product {
  border: 1px solid #eee;
  padding: 20px;
  background: #fff;
  text-align: center;
  border-radius: 6px;
  transition: box-shadow 0.3s ease;
}
.single-product .related.products li.product:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.single-product .related.products .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 500;
  margin: 15px 0;
}
.single-product .related.products .price {
  font-size: 16px;
}
.single-product .related.products .button {
  background: #e53935;
  color: #fff;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
}
.single-product .related.products .button:hover {
  background: #c62828;
}

/* Product gallery image enhancement */
.single-product .woocommerce-product-gallery__image img {
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}
.single-product .woocommerce-product-gallery__image img:hover {
  transform: scale(1.03);
}

/* Layout for image + summary */
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
  display: inline-block;
  vertical-align: top;
}
.single-product .woocommerce-product-gallery {
  width: 45%;
  padding-right: 30px;
}
.single-product .summary.entry-summary {
  width: 50%;
}

/* Review stars */
.single-product .woocommerce-Reviews .stars a {
  color: #fbc02d;
  font-size: 18px;
}
.single-product .comment-form-rating select {
  display: none !important;
}
.single-product .woocommerce-Tabs-panel--reviews {
  background: #fafafa;
  padding: 20px;
  border-radius: 4px;
}
.single-product #reply-title.comment-reply-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* Button focus */
.single-product button:focus,
.single-product .button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .single-product form.cart {
    flex-direction: column;
    align-items: flex-start;
  }
  .single-product .product_title {
    font-size: 22px;
  }
  .single-product .woocommerce-product-gallery,
  .single-product .summary.entry-summary {
    width: 100%;
    display: block;
    padding: 0;
  }
}

—

✅ This ensures the CSS only affects single product pages and prevents side effects elsewhere.

Let me know if you want to apply similar styles for the cart, checkout, or archive/shop pages!

User
this is how i/m seeing single product !
User
this is how I see my related products
Assistant
Thanks for sharing the screenshot. From your related products display, here are the issues you're facing:

### 🔎 Issues Identified:
1. **Text is too condensed** and not balanced.
2. **Typography hierarchy** is missing (e.g., title, subtitle).
3. **Text is too red** – it should only highlight certain parts like prices or buttons.
4. **Sale badge** looks unstyled and floating.
5. **Cards are too narrow and vertical** – not aligned with modern eCommerce cards.
6. **Image is missing from product cards** (or not rendering).
7. **No visual separation** (padding/margin/box-shadow).

—

### ✅ Improved CSS for `.single-product .related.products` section:

.single-product .related.products ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 30px;
}

.single-product .related.products li.product {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  padding: 20px;
  width: calc(33.333% - 20px);
  text-align: center;
  transition: transform 0.3s ease;
}
.single-product .related.products li.product:hover {
  transform: translateY(-5px);
}

.single-product .related.products .onsale {
  background-color: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 999px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.single-product .related.products .woocommerce-loop-product__link {
  display: block;
  position: relative;
}

.single-product .related.products img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 15px;
}

.single-product .related.products .woocommerce-loop-product__title {
  font-size: 16px;
  color: #111;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}

.single-product .related.products .price {
  font-size: 15px;
  color: #000;
  font-weight: 600;
  margin: 10px 0;
}
.single-product .related.products .price del {
  color: #aaa;
  margin-right: 6px;
}
.single-product .related.products .price ins {
  color: #e53935;
  text-decoration: none;
}

.single-product .related.products .add_to_cart_button {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 10px;
  display: inline-block;
  transition: background 0.3s ease;
}
.single-product .related.products .add_to_cart_button:hover {
  background: #c62828;
}

/* Responsive Fix */
@media (max-width: 768px) {
  .single-product .related.products li.product {
    width: 100%;
  }
}

—

### ✅ Result:
– Clear product titles.
– Better spacing between image, title, and buttons.
– Proper color hierarchy (gray → black → red).
– Looks aligned with modern shop layout.

—

Let me know if you also want:
– **Product image on the left** and content on the right in a row layout.
– A slider-style layout for related products.
– “Shop Similar” buttons or ratings included like in your Figma design.

User
give me full css and add important
Assistant
Here is the **full updated CSS for your `.single-product .related.products` section**, with all styles using `!important` to enforce application and avoid conflicts.

This version:
– Fixes layout
– Improves typography
– Styles images, buttons, prices
– Uses `!important` for every property

—

### ✅ Full `.single-product` Related Products CSS (With `!important`):

.single-product .related.products {
  padding-top: 40px !important;
}

.single-product .related.products h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 25px !important;
  color: #111 !important;
  font-family: 'Montserrat', sans-serif !important;
}

.single-product .related.products ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.single-product .related.products li.product {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  padding: 20px !important;
  width: calc(33.333% - 20px) !important;
  text-align: center !important;
  transition: transform 0.3s ease !important;
  position: relative !important;
}

.single-product .related.products li.product:hover {
  transform: translateY(-5px) !important;
}

.single-product .related.products .onsale {
  background-color: #e53935 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 10 !important;
}

.single-product .related.products .woocommerce-loop-product__link {
  display: block !important;
  position: relative !important;
  text-decoration: none !important;
}

.single-product .related.products img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 15px !important;
  border-radius: 4px !important;
}

.single-product .related.products .woocommerce-loop-product__title {
  font-size: 16px !important;
  color: #111 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
}

.single-product .related.products .price {
  font-size: 15px !important;
  color: #000 !important;
  font-weight: 600 !important;
  margin: 10px 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}
.single-product .related.products .price del {
  color: #aaa !important;
  margin-right: 6px !important;
}
.single-product .related.products .price ins {
  color: #e53935 !important;
  text-decoration: none !important;
}

.single-product .related.products .add_to_cart_button {
  background: #e53935 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-top: 10px !important;
  display: inline-block !important;
  transition: background 0.3s ease !important;
  font-size: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
}
.single-product .related.products .add_to_cart_button:hover {
  background: #c62828 !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .single-product .related.products li.product {
    width: calc(50% - 20px) !important;
  }
}

@media (max-width: 768px) {
  .single-product .related.products li.product {
    width: 100% !important;
  }
}

—

✅ **Apply this CSS** via your theme’s `style.css` or **Appearance → Customize → Additional CSS**.

Let me know if you also want:
– Star ratings styled
– “Shop similar” buttons added
– Carousel/swiper setup for related products

Happy to continue polishing it!

User
give me full css for single product and add important also use this color code #FF3333 thats red!
Assistant
Here is the **full and final CSS** for your **WooCommerce Single Product Page**, fully namespaced with `.single-product`, using the **Montserrat font**, **max-width: 1240px**, and your requested **#FF3333 red color** (`!important` added throughout to override other styles).

—

### ✅ Copy and paste the CSS below into **Custom CSS** or your theme’s `style.css`:

/* SINGLE PRODUCT PAGE GLOBAL WRAPPER */
.single-product .site-main {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  background: #fff !important;
}

/* PRODUCT TITLE */
.single-product .product_title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin-bottom: 20px !important;
}

/* SALE BADGE */
.single-product .onsale {
  background-color: #FF3333 !important;
  color: #fff !important;
  padding: 5px 12px !important;
  font-weight: bold !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  z-index: 2 !important;
}

/* PRODUCT GALLERY IMAGE */
.single-product .woocommerce-product-gallery__image img {
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s !important;
}
.single-product .woocommerce-product-gallery__image img:hover {
  transform: scale(1.03) !important;
}

/* LAYOUT: IMAGE + SUMMARY */
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
  display: inline-block !important;
  vertical-align: top !important;
}
.single-product .woocommerce-product-gallery {
  width: 45% !important;
  padding-right: 30px !important;
}
.single-product .summary.entry-summary {
  width: 50% !important;
}

/* PRICE */
.single-product .price {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin: 15px 0 !important;
}
.single-product .price del {
  color: #999 !important;
  margin-right: 8px !important;
}
.single-product .price ins {
  color: #FF3333 !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

/* ADD TO CART FORM */
.single-product form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  align-items: center !important;
  margin-top: 20px !important;
}
.single-product form.cart .quantity input {
  width: 80px !important;
  height: 45px !important;
  padding: 10px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}
.single-product form.cart .single_add_to_cart_button {
  background-color: #FF3333 !important;
  color: #fff !important;
  padding: 12px 25px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  transition: background 0.3s !important;
}
.single-product form.cart .single_add_to_cart_button:hover {
  background-color: #cc0000 !important;
}

/* PRODUCT META */
.single-product .product_meta {
  margin-top: 20px !important;
  font-size: 14px !important;
  color: #444 !important;
}
.single-product .product_meta a {
  color: #FF3333 !important;
  text-decoration: none !important;
}
.single-product .product_meta a:hover {
  text-decoration: underline !important;
}

/* TABS */
.single-product .woocommerce-tabs .tabs li {
  display: inline-block !important;
  margin-right: 20px !important;
  font-weight: bold !important;
  border-bottom: 2px solid transparent !important;
}
.single-product .woocommerce-tabs .tabs li.active {
  border-bottom-color: #FF3333 !important;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: 20px !important;
  border-top: 1px solid #eee !important;
  margin-top: 20px !important;
}
.single-product .woocommerce-Reviews-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

/* REVIEW FORM */
.single-product .comment-form-rating label,
.single-product .comment-form-comment label {
  font-weight: 500 !important;
  color: #333 !important;
}
.single-product .comment-form-comment textarea {
  width: 100% !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 10px !important;
}
.single-product .woocommerce-Reviews .stars a {
  color: #fbc02d !important;
  font-size: 18px !important;
}
.single-product .comment-form-rating select {
  display: none !important;
}
.single-product .woocommerce-Tabs-panel--reviews {
  background: #fafafa !important;
  padding: 20px !important;
  border-radius: 4px !important;
}
.single-product #reply-title.comment-reply-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
}

/* BUTTON FOCUS */
.single-product button:focus,
.single-product .button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.3) !important;
}

/* RELATED PRODUCTS */
.single-product .related.products h2 {
  font-size: 22px !important;
  font-weight: bold !important;
  margin-top: 50px !important;
  margin-bottom: 25px !important;
}

.single-product .related.products ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 30px !important;
}

.single-product .related.products li.product {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  padding: 20px !important;
  width: calc(33.333% - 20px) !important;
  text-align: center !important;
  transition: transform 0.3s ease !important;
}
.single-product .related.products li.product:hover {
  transform: translateY(-5px) !important;
}

.single-product .related.products .onsale {
  background-color: #FF3333 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 10 !important;
}

.single-product .related.products .woocommerce-loop-product__title {
  font-size: 16px !important;
  color: #111 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

.single-product .related.products .price {
  font-size: 15px !important;
  color: #000 !important;
  font-weight: 600 !important;
  margin: 10px 0 !important;
}
.single-product .related.products .price del {
  color: #aaa !important;
  margin-right: 6px !important;
}
.single-product .related.products .price ins {
  color: #FF3333 !important;
  text-decoration: none !important;
}

.single-product .related.products .add_to_cart_button {
  background: #FF3333 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-top: 10px !important;
  display: inline-block !important;
  transition: background 0.3s ease !important;
}
.single-product .related.products .add_to_cart_button:hover {
  background: #cc0000 !important;
}

/* RESPONSIVE FIX */
@media (max-width: 768px) {
  .single-product .woocommerce-product-gallery,
  .single-product .summary.entry-summary {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }

  .single-product form.cart {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .single-product .related.products li.product {
    width: 100% !important;
  }
}

—

### ✅ Don't Forget:
Add this line in your theme's `functions.php` to load Montserrat if not already:

wp_enqueue_style( 'montserrat-font', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap', false );

Let me know if you want me to handle styling for the **gallery thumbnails**, **breadcrumb**, or **product description layout** next.

User
/* SINGLE PRODUCT PAGE GLOBAL WRAPPER */
.single-product .site-main {
max-width: 1240px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
font-family: 'Montserrat', sans-serif !important;
background: #fff !important;
}

/* PRODUCT TITLE */
.single-product .product_title {
font-size: 28px !important;
font-weight: 600 !important;
color: #111 !important;
margin-bottom: 20px !important;
}

/* SALE BADGE */
.single-product .onsale {
background-color: #FF3333 !important;
color: #fff !important;
padding: 5px 12px !important;
font-weight: bold !important;
position: absolute !important;
top: 10px !important;
left: 10px !important;
font-size: 13px !important;
border-radius: 20px !important;
z-index: 2 !important;
}

/* PRODUCT GALLERY IMAGE */
.single-product .woocommerce-product-gallery__image img {
border-radius: 6px !important;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;
transition: transform 0.3s !important;
}

/* LAYOUT: IMAGE + SUMMARY */
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
display: inline-block !important;
vertical-align: top !important;
}
.single-product .woocommerce-product-gallery {
width: 45% !important;
padding-right: 30px !important;
}
.single-product .summary.entry-summary {
width: 50% !important;
}

/* PRICE */
.single-product .price {
font-size: 20px !important;
font-weight: 500 !important;
color: #333 !important;
margin: 15px 0 !important;
}
.single-product .price del {
color: #999 !important;
margin-right: 8px !important;
}
.single-product .price ins {
color: #FF3333 !important;
font-weight: bold !important;
text-decoration: none !important;
}

/* ADD TO CART FORM */
.single-product form.cart {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
align-items: center !important;
margin-top: 20px !important;
}
.single-product form.cart .quantity input {
width: 80px !important;
height: 45px !important;
padding: 10px !important;
font-size: 16px !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
}
.single-product form.cart .single_add_to_cart_button {
background-color: #FF3333 !important;
color: #fff !important;
padding: 12px 25px !important;
font-size: 16px !important;
font-weight: bold !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 4px !important;
transition: background 0.3s !important;
}

/* PRODUCT META */
.single-product .product_meta {
margin-top: 20px !important;
font-size: 14px !important;
color: #444 !important;
}
.single-product .product_meta a {
color: #FF3333 !important;
text-decoration: none !important;
}
.single-product .product_meta a:hover {
text-decoration: underline !important;
}

/* TABS */
.single-product .woocommerce-tabs .tabs li {
display: inline-block !important;
margin-right: 20px !important;
font-weight: bold !important;
border-bottom: 2px solid transparent !important;
}
.single-product .woocommerce-tabs .tabs li.active {
border-bottom-color: #FF3333 !important;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
padding-top: 20px !important;
border-top: 1px solid #eee !important;
margin-top: 20px !important;
}
.single-product .woocommerce-Reviews-title {
font-size: 18px !important;
font-weight: 600 !important;
margin-bottom: 10px !important;
}

/* REVIEW FORM */
.single-product .comment-form-rating label,
.single-product .comment-form-comment label {
font-weight: 500 !important;
color: #333 !important;
}
.single-product .comment-form-comment textarea {
width: 100% !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
padding: 10px !important;
}
.single-product .woocommerce-Reviews .stars a {
color: #fbc02d !important;
font-size: 18px !important;
}
.single-product .comment-form-rating select {
display: none !important;
}
.single-product .woocommerce-Tabs-panel–reviews {
background: #fafafa !important;
padding: 20px !important;
border-radius: 4px !important;
}
.single-product #reply-title.comment-reply-title {
font-size: 16px !important;
font-weight: 500 !important;
margin-bottom: 10px !important;
}

/* BUTTON FOCUS */
.single-product button:focus,
.single-product .button:focus {
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.3) !important;
}

/* RELATED PRODUCTS */
.single-product .related.products h2 {
font-size: 22px !important;
font-weight: bold !important;
margin-top: 50px !important;
margin-bottom: 25px !important;
}

.single-product .related.products ul.products {
display: flex !important;
flex-wrap: wrap !important;
gap: 30px !important;
margin-top: 30px !important;
}

.single-product .related.products li.product {
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
padding: 20px !important;
width: calc(33.333% – 20px) !important;
text-align: center !important;
transition: transform 0.3s ease !important;
}
.single-product .related.products li.product:hover {
transform: translateY(-5px) !important;
}

.single-product .related.products .onsale {
background-color: #FF3333 !important;
color: #fff !important;
font-size: 12px !important;
font-weight: bold !important;
padding: 5px 10px !important;
border-radius: 999px !important;
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 10 !important;
}

.single-product .related.products .woocommerce-loop-product__title {
font-size: 16px !important;
color: #111 !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin-bottom: 10px !important;
}

.single-product .related.products .price {
font-size: 15px !important;
color: #000 !important;
font-weight: 600 !important;
margin: 10px 0 !important;
}
.single-product .related.products .price del {
color: #aaa !important;
margin-right: 6px !important;
}
.single-product .related.products .price ins {
color: #FF3333 !important;
text-decoration: none !important;
}

.single-product .related.products .add_to_cart_button {
background: #FF3333 !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
padding: 10px 20px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
margin-top: 10px !important;
display: inline-block !important;
transition: background 0.3s ease !important;
}
.single-product .related.products .add_to_cart_button:hover {
background: #cc0000 !important;
}

/* RESPONSIVE FIX */
@media (max-width: 768px) {
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
width: 100% !important;
display: block !important;
padding: 0 !important;
}

.single-product form.cart {
flex-direction: column !important;
align-items: flex-start !important;
}

.single-product .related.products li.product {
width: 100% !important;
}
}

this is my css currently , and related products still not looking fine to me , make image size equal , and sale on top-right not full width make sure you will design it in best way , also make it look best

remove comments ans hare full code !

User
[media pointer="file-service://file-9kojPSQBcpZrXtnULAT2HT"]

/* SINGLE PRODUCT PAGE GLOBAL WRAPPER */
.single-product .site-main {
max-width: 1240px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
font-family: 'Montserrat', sans-serif !important;
background: #fff !important;
}

/* PRODUCT TITLE */
.single-product .product_title {
font-size: 28px !important;
font-weight: 600 !important;
color: #111 !important;
margin-bottom: 20px !important;
}

/* SALE BADGE */
.single-product .onsale {
background-color: #FF3333 !important;
color: #fff !important;
padding: 5px 12px !important;
font-weight: bold !important;
position: absolute !important;
top: 10px !important;
left: 10px !important;
font-size: 13px !important;
border-radius: 20px !important;
z-index: 2 !important;
}

/* PRODUCT GALLERY IMAGE */
.single-product .woocommerce-product-gallery__image img {
border-radius: 6px !important;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;
transition: transform 0.3s !important;
}

/* LAYOUT: IMAGE + SUMMARY */
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
display: inline-block !important;
vertical-align: top !important;
}
.single-product .woocommerce-product-gallery {
width: 45% !important;
padding-right: 30px !important;
}
.single-product .summary.entry-summary {
width: 50% !important;
}

/* PRICE */
.single-product .price {
font-size: 20px !important;
font-weight: 500 !important;
color: #333 !important;
margin: 15px 0 !important;
}
.single-product .price del {
color: #999 !important;
margin-right: 8px !important;
}
.single-product .price ins {
color: #FF3333 !important;
font-weight: bold !important;
text-decoration: none !important;
}

/* ADD TO CART FORM */
.single-product form.cart {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
align-items: center !important;
margin-top: 20px !important;
}
.single-product form.cart .quantity input {
width: 80px !important;
height: 45px !important;
padding: 10px !important;
font-size: 16px !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
}
.single-product form.cart .single_add_to_cart_button {
background-color: #FF3333 !important;
color: #fff !important;
padding: 12px 25px !important;
font-size: 16px !important;
font-weight: bold !important;
text-transform: uppercase !important;
border: none !important;
border-radius: 4px !important;
transition: background 0.3s !important;
}

/* PRODUCT META */
.single-product .product_meta {
margin-top: 20px !important;
font-size: 14px !important;
color: #444 !important;
}
.single-product .product_meta a {
color: #FF3333 !important;
text-decoration: none !important;
}
.single-product .product_meta a:hover {
text-decoration: underline !important;
}

/* TABS */
.single-product .woocommerce-tabs .tabs li {
display: inline-block !important;
margin-right: 20px !important;
font-weight: bold !important;
border-bottom: 2px solid transparent !important;
}
.single-product .woocommerce-tabs .tabs li.active {
border-bottom-color: #FF3333 !important;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
padding-top: 20px !important;
border-top: 1px solid #eee !important;
margin-top: 20px !important;
}
.single-product .woocommerce-Reviews-title {
font-size: 18px !important;
font-weight: 600 !important;
margin-bottom: 10px !important;
}

/* REVIEW FORM */
.single-product .comment-form-rating label,
.single-product .comment-form-comment label {
font-weight: 500 !important;
color: #333 !important;
}
.single-product .comment-form-comment textarea {
width: 100% !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
padding: 10px !important;
}
.single-product .woocommerce-Reviews .stars a {
color: #fbc02d !important;
font-size: 18px !important;
}
.single-product .comment-form-rating select {
display: none !important;
}
.single-product .woocommerce-Tabs-panel–reviews {
background: #fafafa !important;
padding: 20px !important;
border-radius: 4px !important;
}
.single-product #reply-title.comment-reply-title {
font-size: 16px !important;
font-weight: 500 !important;
margin-bottom: 10px !important;
}

/* BUTTON FOCUS */
.single-product button:focus,
.single-product .button:focus {
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.3) !important;
}

/* RELATED PRODUCTS */
.single-product .related.products h2 {
font-size: 22px !important;
font-weight: bold !important;
margin-top: 50px !important;
margin-bottom: 25px !important;
}

.single-product .related.products ul.products {
display: flex !important;
flex-wrap: wrap !important;
gap: 30px !important;
margin-top: 30px !important;
}

.single-product .related.products li.product {
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
padding: 20px !important;
width: calc(33.333% – 20px) !important;
text-align: center !important;
transition: transform 0.3s ease !important;
}
.single-product .related.products li.product:hover {
transform: translateY(-5px) !important;
}

.single-product .related.products .onsale {
background-color: #FF3333 !important;
color: #fff !important;
font-size: 12px !important;
font-weight: bold !important;
padding: 5px 10px !important;
border-radius: 999px !important;
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 10 !important;
}

.single-product .related.products .woocommerce-loop-product__title {
font-size: 16px !important;
color: #111 !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin-bottom: 10px !important;
}

.single-product .related.products .price {
font-size: 15px !important;
color: #000 !important;
font-weight: 600 !important;
margin: 10px 0 !important;
}
.single-product .related.products .price del {
color: #aaa !important;
margin-right: 6px !important;
}
.single-product .related.products .price ins {
color: #FF3333 !important;
text-decoration: none !important;
}

.single-product .related.products .add_to_cart_button {
background: #FF3333 !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
padding: 10px 20px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
margin-top: 10px !important;
display: inline-block !important;
transition: background 0.3s ease !important;
}
.single-product .related.products .add_to_cart_button:hover {
background: #cc0000 !important;
}

/* RESPONSIVE FIX */
@media (max-width: 768px) {
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
width: 100% !important;
display: block !important;
padding: 0 !important;
}

.single-product form.cart {
flex-direction: column !important;
align-items: flex-start !important;
}

.single-product .related.products li.product {
width: 100% !important;
}
}

this is my css currently , and related products still not looking fine to me , make image size equal , and sale on top-right not full width make sure you will design it in best way , also make it look best

remove comments ans hare full code !

Assistant
Here's your **refined and optimized full CSS** for the **single product page**, with the following improvements:

✅ Image height consistency in related products
✅ Sale badge repositioned to **top-right corner** (not full width)
✅ Clean, modern, professional appearance
✅ All layout issues resolved
✅ Responsive and scoped with `.single-product`
✅ `!important` applied to prevent conflicts
✅ No comments, clean and ready to use

—

### ✅ Final Full CSS:

.single-product .site-main {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  background: #fff !important;
}

.single-product .product_title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin-bottom: 20px !important;
}

.single-product .onsale {
  background-color: #FF3333 !important;
  color: #fff !important;
  padding: 5px 12px !important;
  font-weight: bold !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  font-size: 12px !important;
  border-radius: 20px !important;
  z-index: 2 !important;
}

.single-product .woocommerce-product-gallery__image img {
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
  display: inline-block !important;
  vertical-align: top !important;
}

.single-product .woocommerce-product-gallery {
  width: 45% !important;
  padding-right: 30px !important;
}

.single-product .summary.entry-summary {
  width: 50% !important;
}

.single-product .price {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin: 15px 0 !important;
}

.single-product .price del {
  color: #999 !important;
  margin-right: 8px !important;
}

.single-product .price ins {
  color: #FF3333 !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

.single-product form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  align-items: center !important;
  margin-top: 20px !important;
}

.single-product form.cart .quantity input {
  width: 80px !important;
  height: 45px !important;
  padding: 10px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}

.single-product form.cart .single_add_to_cart_button {
  background-color: #FF3333 !important;
  color: #fff !important;
  padding: 12px 25px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  transition: background 0.3s !important;
}

.single-product form.cart .single_add_to_cart_button:hover {
  background-color: #cc0000 !important;
}

.single-product .product_meta {
  margin-top: 20px !important;
  font-size: 14px !important;
  color: #444 !important;
}

.single-product .product_meta a {
  color: #FF3333 !important;
  text-decoration: none !important;
}

.single-product .product_meta a:hover {
  text-decoration: underline !important;
}

.single-product .woocommerce-tabs .tabs li {
  display: inline-block !important;
  margin-right: 20px !important;
  font-weight: bold !important;
  border-bottom: 2px solid transparent !important;
}

.single-product .woocommerce-tabs .tabs li.active {
  border-bottom-color: #FF3333 !important;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: 20px !important;
  border-top: 1px solid #eee !important;
  margin-top: 20px !important;
}

.single-product .woocommerce-Reviews-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

.single-product .comment-form-rating label,
.single-product .comment-form-comment label {
  font-weight: 500 !important;
  color: #333 !important;
}

.single-product .comment-form-comment textarea {
  width: 100% !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 10px !important;
}

.single-product .woocommerce-Reviews .stars a {
  color: #fbc02d !important;
  font-size: 18px !important;
}

.single-product .comment-form-rating select {
  display: none !important;
}

.single-product .woocommerce-Tabs-panel--reviews {
  background: #fafafa !important;
  padding: 20px !important;
  border-radius: 4px !important;
}

.single-product #reply-title.comment-reply-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
}

.single-product button:focus,
.single-product .button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.3) !important;
}

.single-product .related.products h2 {
  font-size: 22px !important;
  font-weight: bold !important;
  margin-top: 50px !important;
  margin-bottom: 25px !important;
}

.single-product .related.products ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 30px !important;
}

.single-product .related.products li.product {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  padding: 20px !important;
  width: calc(33.333% - 20px) !important;
  text-align: center !important;
  transition: transform 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.single-product .related.products li.product:hover {
  transform: translateY(-5px) !important;
}

.single-product .related.products li.product img {
  width: 100% !important;
  height: 200px !important;
  object-fit: contain !important;
  margin-bottom: 15px !important;
}

.single-product .related.products .onsale {
  background-color: #FF3333 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
}

.single-product .related.products .woocommerce-loop-product__title {
  font-size: 15px !important;
  color: #111 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

.single-product .related.products .price {
  font-size: 15px !important;
  color: #000 !important;
  font-weight: 600 !important;
  margin: 10px 0 !important;
}

.single-product .related.products .price del {
  color: #aaa !important;
  margin-right: 6px !important;
}

.single-product .related.products .price ins {
  color: #FF3333 !important;
  text-decoration: none !important;
}

.single-product .related.products .add_to_cart_button {
  background: #FF3333 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-top: 10px !important;
  display: inline-block !important;
  transition: background 0.3s ease !important;
}

.single-product .related.products .add_to_cart_button:hover {
  background: #cc0000 !important;
}

@media (max-width: 768px) {
  .single-product .woocommerce-product-gallery,
  .single-product .summary.entry-summary {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }

  .single-product form.cart {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .single-product .related.products li.product {
    width: 100% !important;
  }

  .single-product .related.products li.product img {
    height: 180px !important;
  }
}

Let me know if you want to:
– Add **ratings** below the product titles
– Add **"Shop Similar"** buttons
– Convert related products to a **carousel slider**

Happy to help make this perfect.

User
related products are fine now , but what you have done with this , see it it make it coreect make sale on top-right to product image like related products and make it this section even more better!
Assistant
Thanks for the screenshot. You’re right — the **main product image “Sale” badge** is currently **stretching across the top**, which is incorrect. Let's fix that by:

### ✅ Goals:
1. Place the **Sale badge in the top-right corner of the main product image** — like related products.
2. Ensure the product image and gallery section look **clean, proportional, and responsive**.
3. Fix the **zoom icon overlapping the badge** issue.

—

### ✅ Add or Replace This in Your Existing CSS:

.single-product .woocommerce-product-gallery {
  position: relative !important;
}

.single-product .onsale {
  background-color: #FF3333 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  width: auto !important;
  max-width: none !important;
  line-height: normal !important;
}

.single-product .woocommerce-product-gallery__trigger {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #fff !important;
  border-radius: 100% !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9 !important;
}

.single-product .woocommerce-product-gallery__trigger img {
  width: 18px !important;
  height: 18px !important;
}

—

### ✨ Optional Enhancements:
To make this section even **visually better**, you can add the following improvements:

.single-product .woocommerce-product-gallery__wrapper {
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  padding: 10px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

—

### 📌 Result:
– Sale badge will sit top-right on the product image like in related items.
– Zoom icon is centered, styled cleanly.
– Gallery section is clean, padded, and styled with shadow.

Let me know if you want to:
– Replace the zoom icon with a custom icon
– Add a small tag like “Hot” or “Trending” beside “Sale”
– Include a thumbnail slider under the image

I'm happy to continue enhancing this with you!

User
give me full updated code !
Assistant
Here is your **fully updated and final single product CSS**, with the following corrections and enhancements:

—

### ✅ Key Improvements:
– `Sale` badge fixed and aligned **top-right** on main image
– `Zoom icon` is clean and centered
– `Product image` area styled with padding, shadow, rounded corners
– Related products already styled perfectly
– Fully responsive and scoped with `.single-product`
– Uses **Montserrat** font and **#FF3333** as primary red
– `!important` used consistently to override all theme conflicts

—

### ✅ Full CSS (Production Ready):

.single-product .site-main {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  background: #fff !important;
}

.single-product .product_title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin-bottom: 20px !important;
}

.single-product .woocommerce-product-gallery {
  width: 45% !important;
  padding-right: 30px !important;
  position: relative !important;
}

.single-product .woocommerce-product-gallery__wrapper {
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  padding: 10px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

.single-product .woocommerce-product-gallery__image img {
  border-radius: 6px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  box-shadow: none !important;
  transition: transform 0.3s !important;
}

.single-product .woocommerce-product-gallery__trigger {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #fff !important;
  border-radius: 100% !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9 !important;
}

.single-product .woocommerce-product-gallery__trigger img {
  width: 18px !important;
  height: 18px !important;
}

.single-product .onsale {
  background-color: #FF3333 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  width: auto !important;
  max-width: none !important;
  line-height: normal !important;
}

.single-product .summary.entry-summary {
  width: 50% !important;
  display: inline-block !important;
  vertical-align: top !important;
}

.single-product .price {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin: 15px 0 !important;
}

.single-product .price del {
  color: #999 !important;
  margin-right: 8px !important;
}

.single-product .price ins {
  color: #FF3333 !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

.single-product form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  align-items: center !important;
  margin-top: 20px !important;
}

.single-product form.cart .quantity input {
  width: 80px !important;
  height: 45px !important;
  padding: 10px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}

.single-product form.cart .single_add_to_cart_button {
  background-color: #FF3333 !important;
  color: #fff !important;
  padding: 12px 25px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  transition: background 0.3s !important;
}

.single-product form.cart .single_add_to_cart_button:hover {
  background-color: #cc0000 !important;
}

.single-product .product_meta {
  margin-top: 20px !important;
  font-size: 14px !important;
  color: #444 !important;
}

.single-product .product_meta a {
  color: #FF3333 !important;
  text-decoration: none !important;
}

.single-product .product_meta a:hover {
  text-decoration: underline !important;
}

.single-product .woocommerce-tabs .tabs li {
  display: inline-block !important;
  margin-right: 20px !important;
  font-weight: bold !important;
  border-bottom: 2px solid transparent !important;
}

.single-product .woocommerce-tabs .tabs li.active {
  border-bottom-color: #FF3333 !important;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: 20px !important;
  border-top: 1px solid #eee !important;
  margin-top: 20px !important;
}

.single-product .woocommerce-Reviews-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

.single-product .comment-form-rating label,
.single-product .comment-form-comment label {
  font-weight: 500 !important;
  color: #333 !important;
}

.single-product .comment-form-comment textarea {
  width: 100% !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 10px !important;
}

.single-product .woocommerce-Reviews .stars a {
  color: #fbc02d !important;
  font-size: 18px !important;
}

.single-product .comment-form-rating select {
  display: none !important;
}

.single-product .woocommerce-Tabs-panel--reviews {
  background: #fafafa !important;
  padding: 20px !important;
  border-radius: 4px !important;
}

.single-product #reply-title.comment-reply-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
}

.single-product button:focus,
.single-product .button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.3) !important;
}

.single-product .related.products h2 {
  font-size: 22px !important;
  font-weight: bold !important;
  margin-top: 50px !important;
  margin-bottom: 25px !important;
}

.single-product .related.products ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 30px !important;
}

.single-product .related.products li.product {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  padding: 20px !important;
  width: calc(33.333% - 20px) !important;
  text-align: center !important;
  transition: transform 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.single-product .related.products li.product:hover {
  transform: translateY(-5px) !important;
}

.single-product .related.products li.product img {
  width: 100% !important;
  height: 200px !important;
  object-fit: contain !important;
  margin-bottom: 15px !important;
}

.single-product .related.products .onsale {
  background-color: #FF3333 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
}

.single-product .related.products .woocommerce-loop-product__title {
  font-size: 15px !important;
  color: #111 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

.single-product .related.products .price {
  font-size: 15px !important;
  color: #000 !important;
  font-weight: 600 !important;
  margin: 10px 0 !important;
}

.single-product .related.products .price del {
  color: #aaa !important;
  margin-right: 6px !important;
}

.single-product .related.products .price ins {
  color: #FF3333 !important;
  text-decoration: none !important;
}

.single-product .related.products .add_to_cart_button {
  background: #FF3333 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-top: 10px !important;
  display: inline-block !important;
  transition: background 0.3s ease !important;
}

.single-product .related.products .add_to_cart_button:hover {
  background: #cc0000 !important;
}

@media (max-width: 768px) {
  .single-product .woocommerce-product-gallery,
  .single-product .summary.entry-summary {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }

  .single-product form.cart {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .single-product .related.products li.product {
    width: 100% !important;
  }

  .single-product .related.products li.product img {
    height: 180px !important;
  }
}

—

Let me know if you'd like to:
– Add **breadcrumbs styling**
– Style the **tabs into cards or pills**
– Animate the **Add to Cart** button
– Add **hover zoom effect** on main product image

Ready for next enhancement when you are!

Leave a Comment

Your email address will not be published. Required fields are marked *