Add more ‘Add to Basket’ buttons on product page and make button bigger.

Hey ballindigital,
Thanks for your patience and the link to your site, to make the Add to Basket button lager and change it’s style you can try some css like this:

#top.woocommerce-page .main_color .button[name=add-to-cart] {
	 background-color: #ffd1ed;
	 width: 200px;
	 font-size: 16px;
}

I’m not sure how you want to style the button, please explain further if you need more help with it.
#2 where on the page do you want the second Add to Basket button, in the Description?
#3 I don’t see a link to your example site, but even with only 4 images on mobile I don’t believe the info would be “above the fold” perhaps moving the images after the info on mobile would achieve what you would like? If so try this css:

@media only screen and (max-width: 767px) { 
  #top.single-product .product {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.single-product .single-product-main-image {
      order: 2 !important; 
  }
  #top.single-product .single-product-summary {
      order: 1 !important; 
  }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience and the link to the page, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top.single-product .woocommerce-product-gallery .thumbnails a:nth-child(n+4) {
	display: none;
}
}

This will show one large image and three thumbnails on mobile so the product info also shows “above the fold”
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience but unfortunately I don’t see an easy way to create a grid of four on mobile, I recommend using your css to only show the main image, this looks like it’s working correctly.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper > a {
	display: none;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top.single-product .woocommerce-product-gallery .thumbnails a:nth-child(n+4) {
	display: none;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I believe that you misunderstood, I suggested adding the last snippet also, that is try using both together.

Best regards,
Mike