Docs

[kbzvomuya]

I am having issue aligning the product features to a manageable size. i have gone through the other blogs but the proposed solutions do not work on my site. Could you please assist

Please see link below:
http://a2c.3b3.myftpupload.com/shop/

[Nico]

Hi There,

Thanks for writing in.

First, you need to uniform your image sizes. The image to be used is 220 px width then the height is 600px.

Let us know how it goes.

Thanks.

[kbzvomuya]

Hi,

I have changed all the pic sizes to 220 x 600 px and regenerated all the images. whats the next step?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.woocommerce li.product .entry-featured {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
}

Hope that helps.

[kbzvomuya]

Perfect. Thanks mate.

One more question how do i also control the display size of product image also:

http://a2c.3b3.myftpupload.com/product/pink-moscato/ without having to resize the image.

[Christopher]

Hi there,

Please add this as well :

.woocommerce div.product .images img {
    width: 19%;
}

Hope it helps.

[kbzvomuya]

Thanks again that works okay but how do i get rid of the white pace around the images after changing the background of the page.

[Paul R]

Hi,

Please change the code to this.

.woocommerce div.product .images img {
    width: 19%;
    padding:0;
}

Hope that helps.

[kbzvomuya]

That didn’t work. Since i am using png with transparent background i want the background image/color to cover the page and all images and text should sit on top on the image. look at the link link i sent previously I want to get rid of all the white space.

[Thai]

Hi There,

Please add the following CSS instead:

.woocommerce div.product .images a {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

Hope it helps 🙂

[kbzvomuya]

This reply has been marked as private.

[kbzvomuya]

Thanks it worked perfectly.

I also had to add this code to add transparency to the shop page:

.woocommerce li.product {
background-color: transparent;
border: none;
box-shadow: none;

}

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts