[Resolved] WooCommerce Layout

Home Forums Support [Resolved] WooCommerce Layout

Home Forums Support WooCommerce Layout

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2069423
    Shaun

    Hi
    I am working on a site that sells printed photos through WooCommerce. The site uses GP (link below).
    I set up Woo to show the image at 100% image width, so customers can see it clearly. Yet, the add to cart and qty buttons disappear and I left with a huge white space underneath before the related products. When I set the image width to 50%, the add to cart and qty buttons appear (see

  • https://www.dropbox.com/t/He7Q8V1PpyKL4AmP
  • )

    Is there any way around this?

#2069435
Elvin
Staff
Customer Support

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. πŸ˜€

A wise man once said:
"Have you cleared your cache?"

#2069459
Shaun

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

#2069467
Elvin
Staff
Customer Support

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;
}

A wise man once said:
"Have you cleared your cache?"

#2069469
Shaun

Thanks Elvin

It worked perfectly!

Cheers
Shaun

#2069470
Shaun

Forgot to mark as closed

#2069471
Elvin
Staff
Customer Support

Glad you got it sorted. No problem. πŸ˜€

A wise man once said:
"Have you cleared your cache?"

#2069526
Shaun

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.

#2069533
Elvin
Staff
Customer Support

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;
}

A wise man once said:
"Have you cleared your cache?"

#2069547
Shaun

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

#2069551
Elvin
Staff
Customer Support

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)

A wise man once said:
"Have you cleared your cache?"

#2069555
Shaun

Still no luck πŸ™

#2069577
Elvin
Staff
Customer Support

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. πŸ˜€

A wise man once said:
"Have you cleared your cache?"

#2069591
Shaun

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

#2069611
Elvin
Staff
Customer Support

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;
}

A wise man once said:
"Have you cleared your cache?"

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.