Docs

[-core]

Hello,

i started setting up a new product on my Woocommerce product page. However, there are some changes i would like to make on it but am unsure of how to go about doing it. i am running the Integrity Stack.

1) Would like to make the product image displayed smaller to something around 250×250.

2) Would like to change the background color of the container and the Description container to white instead of black.

3) i would like to align the product quantity selection and the ‘Add to Cart’ button to the right.

Thanks for the help!

[-core]

This reply has been marked as private.

[Christopher]

Hi there,

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

.woocommerce div.product .images > a img {
    width: 75%;
}
.entry-wrap,.x-tab-content  {

    background-color: #fff;
    box-shadow: inset 0 -0.125em 0.5em 0 rgba(0,0,0,0.85), 0 3px 2px -2px rgba(255,255,255,0.075);

}
.single-product .woocommerce .quantity {
    text-align: right;
}
.single-product button.single_add_to_cart_button {
    float: right;
}
.product_meta {
    text-align: right;
    float: right;
    width: 100%;
}

Hope that helps.

[-core]

Hi Christopher,

thanks so much for the help!

Everything works but there are a couple of issues that still need fixing.

1) After shrinking the image, there is a black background in the image container. Is there anyway to resize the container to make it the same size as the image?

2) The Quantity select dropdown box still does not align right.

In addition, i have two more things i’ll need help with.

3) How do i remove the boarder and the boarder shadows for the outer container and the Product Description container?

4) How do i remove the red line on top of the ‘Description’ heading?

Thanks again!!

[Christopher]

Hi there,

Please update previous code to :

.woocommerce div.product .images {
    position: relative;
    float: left;
    width: 37%;
}
.single-product button.single_add_to_cart_button {
    float: right;
    clear: both;
}
.entry-wrap,.x-tab-content  {

    background-color: #fff;

}
.woocommerce .quantity {
    margin-bottom: 1.313em;
    float: right !important;
    display: block;
}
.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover,.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover { {
    box-shadow: none;
}

Hope it helps.

[-core]

Hi Christopher,

thanks so much for all your help!

i’m still unable to solve these 2 issues.

1) How do i remove the boarder and the boarder shadows for the outer container and the Product Description container?

2) How do i remove the red line on top of the ‘Description’ heading?

Thanks!

[-core]

**Update**

Managed to get the red line removed.
Managed to get the main product container boarder removed.

But still unable to remove the boarder for the Product Description container.

[Lely]

Hi There,

Glad you were able to sort out those two issues.

Please use this custom CSS:

.woocommerce div.product .woocommerce-tabs .x-tab-content {
    box-shadow: none;
    border: 0;
}

Hope this helps.

[-core]

Hi Lely,

that works perfectly!
Thank you so much!

[Lely]

You’re always welcome!

Cheers!

[Author]

Posts