Return to previous page

Shipping calculate at the product page - by Karen Moreira

This topic has 2 replies, 2 voices, and was last updated 3 years, 9 months ago ago by Rose Tyler

Karen Moreira

Participant

July 23, 2020 at 19:17

Hello there,

I added the option to calculate shipping on a product page, as shown in the image, but the elements (field to include numbers, button …) do not fit correctly in the column width, keeping the information hidden .

How to solve this?

Please, contact administrator
for this information.

#245200 Copied Theme version: 6.3.8 WooCommerce version: 4.3.1

1 Answer
Rose Tyler

Support staff

July 24, 2020 at 07:55
Hello,

Add the next code in Theme Options > Theme Custom CSS > Global Custom CSS:
```
.woocommerce .product_meta #shipping-calc {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin-top: 50px;
}
.woocommerce .product_meta #shipping-calc #wscp-postcode.text {
    width: 100%;
    margin: 10px 0 0;
}
.woocommerce .product_meta #shipping-calc #wscp-button {
    width: 100%;
    margin-top: 10px;
}
commerce .product_meta #shipping-calc #delivery_truck {
    margin: 0 auto;
}
.woocommerce .product_meta #shipping-calc a {
    margin: 5px 0 0;
}
```
Regards
#245214 Copied
Viewing 2 results - 1 through 2 (of 2 total)

The issue related to '‘Shipping calculate at the product page’' has been successfully resolved, and the topic is now closed for further responses

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Beaty & Cosmetics – WordPress WooCommerce Theme

lazy-placeholder

Carwash – WordPress WooCommerce Theme

lazy-placeholder

Designers – WordPress Theme

lazy-placeholder

Coffee Store – WordPress WooCommerce Theme

lazy-placeholder

Kids Toys Store – WordPress WooCommerce Theme

lazy-placeholder

Agricultural Store – WordPress WooCommerce Theme

lazy-placeholder

Bakery Store – WordPress WooCommerce Theme

lazy-placeholder

Cosmetics Store – WordPress WooCommerce Theme

lazy-placeholder

Church – WordPress Theme

lazy-placeholder

Barbershop – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.