Hello @derevnya,
1. How to customize the product picture to full screen width?
It seems that your product thumbnails are too small. They currently have a width of 342 pixels but the mobile view is wider. You can adjust the size of the product thumbnails using the plugin https://www.ads-software.com/plugins/simple-image-sizes/. Once you’ve installed that plugin, you can adjust the image sizes via
Settings → Media
I suggest that you set the width of woocommerce_thumbnail to 600 pixels. After you have done that, you need to scroll down to the bottom of the page and regenerate the thumbnails. To speed up this process, it’s sufficient if you only regenerate the woocommerce_thumbnail images.
Next, you’d have to add the following CSS code to your site via
Appearance → Customize → Additional CSS
/* Show full-width images */
ul.products li.product img,
ul.products .wc-block-grid__product img,
.wc-block-grid__products li.product img,
.wc-block-grid__products .wc-block-grid__product img {
width: 100%;
}
2. How to customize the buy button to full screen width?
You can make the buy button full-width by adding the following CSS code to your site via
Appearance → Customize → Additional CSS
/* Make buy button full-width */
ul.products li.product .button,
ul.products .wc-block-grid__product .button,
.wc-block-grid__products li.product .button,
.wc-block-grid__products .wc-block-grid__product .button {
text-align: center;
width: 100%;
}
