Docs

[privateprojects]

Hi there,

I’m really happy with my new website built on X, using the Integrity stack but I’m not so happy with with way my shop and products look. I can’t work out how to edit the appearance in the way I need to (For example: I want to change the layout of the product pages, and get rid of the border on the hover button on the shop view).

Is it possible to keep X but change the Woocommerce theme?
Or how do I edit the woocommerce layout?

Thank you!

[Prasant Rai]

Hello There,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[privateprojects]

Hi thanks Prasant – It is http://www.privateprojects.net/shop/gallery as I don’t currently have the shop component linked to from the main page.

[Prasant Rai]

Hello There,

Thanks for writing in!

To remove border on button hover please use following CSS under Custom > CSS in the Customizer.:

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    border: 0 !important;
}

Can you please elaborate your first question i.e change the layout of the product pages?

Thanks.

[privateprojects]

Thank you – I’d really like to remove the borders on the product pages and also there is a “product description” title I want to remove.

[privateprojects]

one other thing that I am struggling with is that I would like to have uniform size product images on my shop front page, but to be able to click through and not have the “thumbnail” image as the product image.

[privateprojects]

Okay, I’ve actually solved both these things but I have one more thing that I haven’t been able to solve –
I want to remove the box-shadow on the product description but I havent been able to get the CSS work around for this to work.

For example: http://privateprojects.net/shop/product/peerawayt-krasaesom-night-flight/

I’d also really like it if that product description actually sat under the title – is that possible?

Thanks so much. This forum has such a great wealth of knowledge!

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.single-product .x-tab-content {
   -moz-box-shadow:none;
   -webkit-box-shadow:none;
    box-shadow:none;
}

Then add this in Custom > Edit Global Javascript

jQuery(function($) {
   $('.single-product .woocommerce-tabs').insertAfter('.single-product .entry-summary .product_meta');
});

Hope that helps

[Author]

Posts