Ajust single product page

Hello,
I need to make this ajustment to the single product page, and I can’t find this on the theme options:

1. Ajust thumbnail size: I already changed the “Thumbnails image width” option to 95px but still the width of the thumbnail’s column is bigger. I’ve played a little bit with the page’s CSS and managed to achieved the expected result by changing these classes like this:

.col-lg-9 {
max-width: 85%;
}
.col-lg-3 {
max-width: 15%;
}

But since this classes look “not specific” Im not sure if I can just change it without affecting other part of the website.

2. I need to change the “active-thumb” class (when showing the selected thumbnail on the bigger image) and the “.thumbnails.slick-slider .slick-slide:hover” (when hovering a thumbnail)
Instead of “opacity .5” I need it to be:

.product-image-thumbnail.active-thumb {
    border: 1px solid rgb(254,144,121);
	  opacity: 1;
}
.thumbnails.slick-slider .slick-slide:hover {
    border: 1px solid rgb(254,144,121);
	  opacity: 1;
}

As you can see, this custom CSS is active but is not 100% correct as some “sides” are missing (upper) and the opacity effect is still there.

3. And I need to move total price amount “woocommerce-Price-amount amount” to inside the add to cart button, as well as be able to modify the text to:
[Total: “price” => Añadir al carrito]

Thanks

Hello,

The “Thumbnails image width” does not change the width of the thumbnail column. This option changes the size of the inner image file: https://prnt.sc/21ywkfe

In order to change the proportion of the main image and gallery, you will need to add this custom CSS to the Theme Settings > Custom CSS > General:

.website-wrapper .woocommerce-product-gallery.thumbs-position-left .col-lg-9 {
    flex: 0 0 85%;
    max-width: 85%;
}

.website-wrapper .woocommerce-product-gallery.thumbs-position-left .col-lg-3 {
    flex: 0 0 15%;
    max-width: 15%;
}

Then you need to remove your custom CSS and use this one:

.product-image-thumbnail.slick-slide img {
		border: 1px solid transparent;
}

.product-image-thumbnail.slick-slide:hover img,
.product-image-thumbnail.slick-slide.active-thumb img {
    border: 1px solid rgb(254,144,121);
	  opacity: 1;
}

The Woocommerce HTML structure does not allow to move of product price inside the Add to cart button.

You can translate/rewrite all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=D3NsDdMzsls&list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&index=3

Please check the video tutorial to see how to save the translation file correctly. You can remove the plugin and translations would remain. Also, translations would remain after each theme update.

In order to translate the Woocommerce strings, you need to create a separate translation in Loco > Plugins > Woocommerce in the same way as shown in the video.

Best Regards

Hello, and thanks for your quick reply,

on Point 2, it’s “almost there” I just need to eliminate the “opacity .5” efect on selected thumbnail and when hover (check the link)

I tried adding !important attribute but it’s still not showing as expected:

.product-image-thumbnail.slick-slide img {
		border: 1px solid transparent;
	  opacity: 1!important;
}

.product-image-thumbnail.slick-slide:hover img,
.product-image-thumbnail.slick-slide.active-thumb img {
    border: 1px solid rgb(254,144,121);
	  opacity: 1!important;
}

Thanks for your help 🙂

Hello,

Please replace the CSS code relating to the thumbnails with this one:

.product-image-thumbnail.slick-slide img {
		border: 1px solid transparent;
}

.product-image-thumbnail.slick-slide:hover img,
.product-image-thumbnail.slick-slide.active-thumb img {
    border: 1px solid rgb(254,144,121);
}

.product-image-thumbnail.slick-slide:hover,
.product-image-thumbnail.slick-slide.active-thumb {
	  opacity: 1 !important;
}

If you have any questions please feel free to contact us.

Best Regards

Hello,
Thanks! that worked.

But now I’ve just saw other thing on point 1:

– Main image is leaving a gap on the right part (attaching screenshot) and is not using all the available space.
– Can you help me make this image use all the space?

Thanks

Hello,

The problem has been caused by the errors in CCS. As a result, the code of the main image that should make the gallery width 85% does not work.

This is not correct comment in CSS: https://prnt.sc/2261xg9 This is the sample of the correct comment in CSS: /* This is a single-line comment */

You can find the manual here: https://www.w3schools.com/css/css_comments.asp Please correct your comments and check again.

Best Regards

My apologies, you’re totally right, thanks.

Hello,

We are glad you have achieved your goal.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts