WooCommerce Layout

Hi Shaun,

Can you share a mockup image of how you want it to look like? So I can use it as reference for any possible modification.(if needed)

Also, can you share the code that caused this? So I can check it out and see if there are any syntax errors like missing delimiters for HTML tags.

Let us know. :D

Thx for your quick reply Elvin.

The mockup is here

The only code I have added is to remove the Zoom function. I deleted the code and it had no effect, so I put it back in. All other changes (eg Image width have been through the customizer). I added the following:

// 5 remove zoom on woocommerce products
function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

Cheers
Shaun

Ah I think it's because of the float property.

Can you try and see what happens if you use this CSS?

body.single-product article.type-product .woocommerce-product-gallery--with-images {
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
}

Thanks Elvin

It worked perfectly!

Cheers
Shaun

Forgot to mark as closed

Glad you got it sorted. No problem. :D

Hi Again Elvin
I have a follow-up question.
Before the above issue, I had added some CSS to add a box shadow to the product image. It worked. I deleted it when trying to solve the product image width issue.
Now, when I add it back in - there is no box shadow (single product image).
The CSS I used was:

.content-product {
    padding: 5px 5px;
}
.content-product:hover {
    box-shadow: 1px 1px 18px #666666;
}

FYI, I also have different CSS adding a box shadow to thumbnail product images. It works and removing it didn't help with the above, so I put it back in.

I don't see this selector being used in any of the WooCommerce images so I don't think this will work if it's intended to work on product thumbnails and the product image.

The product image wraps the <img> tag with a div tag using woocommerce-product-gallery__image img class so you can use it for adding box-shadow for the product image.

Example:

.woocommerce-product-gallery__image img {
    padding: 5px 5px;
}
.woocommerce-product-gallery__image img:hover {
    box-shadow: 1px 1px 18px #666666;
}

No luck. I added the code but still no box shadow

Try this one:

.woocommerce-product-gallery__image:hover img {
    box-shadow: 1px 1px 18px #666666 !important;
}

Remove the padding added if you wish to remove the gap between the image and the shadow. (the padding is from the child theme's CSS)

Still no luck :(

I've tested the CSS as shown here - https://share.getcloudapp.com/xQuzvZE4

I'm not sure I see the CSS being applied to the site.

Can you confirm if it's being added properly? In case copy and pasting caused any syntax issue. :D

This is what I added to the child theme's style.css page

.woocommerce-product-gallery__image img {
    padding: 5px 5px !important;
}
.woocommerce-product-gallery__image: img {
    box-shadow: 1px 1px 18px #666666 !important;
}'

I took the word <em>hover</em> out, as I wanted on the un-hovered image. 

I had a look at the page CSS (front end using Hoverfy) as well and it showed no Box Shadow. I'm not sure what I am doing wrong. 

Below is all the CSS from my child theme.

/*
Theme Name: WEBsmall Starter Theme
Theme URI: https://websmall.net
Description: Customised GeneratePress child theme
Author: Shaun Killian
Author URI: https://wpwheelie.com
Template: generatepress
Version: 0.1
*/

/*****Contents*****/
/* 1 Change font size for mobile devices*/
/* 2 Bottom Margin on Short Pages*/

/* 1 Change font size for mobile devices*/
@media ( max-width: 768px ) {
body {
font-size: 16px;
}
}

/* 2 Bottom Margin on Short Pages*/
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container.grid-container {
width: 100%;
}
.site-footer {
margin-top: auto;
}

/*Make the add to cart and price appear below the 100% width WooCommerce product image*/
body.single-product article.type-product .woocommerce-product-gallery--with-images {
width: 100% !important;
float: none !important;
margin-bottom: 10 !important;
}

/*Add box shadow to product image on the product page*/
.woocommerce-product-gallery__image img {
padding: 5px 5px !important;
}
.woocommerce-product-gallery__image: img {
box-shadow: 1px 1px 18px #666666 !important;
}
`
Thanks
Shaun

The syntax is broken. You missed removing the :.

We can try putting them in one CSS if you don't want it on hover.

Example:

.woocommerce-product-gallery__image img {
    padding: 5px 5px !important;
    box-shadow: 1px 1px 18px #666666 !important;
}