Return to previous page

Shopping Cart & Woocommerce 3-Step Checkout Layout

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

Bleausard

Participant

September 26, 2017 at 20:09

Dear all at 8theme!

Let me first say thank you to the wonderful designed themes you offer. Currently I a setting up an online shop in Classic theme. I use the Woocommerce Germanized plugin. I have some trouble with the layout of the shopping cart and checkout area. Also with customer profile, but that has minor priority and may follow later on.

I definitely have basic knowledge in CSS and HTML. I alrerady changed the layout by modifying CSS in my child theme successfully.

With the shopping cart and the check out area I have the problem, that I do not find the CSS files and tags that define the problematic ares. You might help me by hinting me on the correct CSS files and areas or even by sending the CSS child code for the major changes I need. Or are there any plugins that offer change of layout for these pages? I could´n find none. Also the Visual Composer does not support these areas.

I put 4 website pages as a JPG into the private section, that show the actual state and the target state I finally like to get (8 files in total).

Many thanks for your help!

Best regards,
Bleausard

Please, contact administrator
for this information.

#173496 Copied Theme version: September 2017 WooCommerce version: 3.1.2

7 Answers

Rose Tyler

Support staff

September 27, 2017 at 08:58

Hello,

Cart and checkout pages are default pages so can’t be edited using Visual Composer.
Please provide me link to your site, so I could help you with css code.

Regards

#173531 Copied

Bleausard

Participant

September 27, 2017 at 10:19

Dear Rose,

thank you so much for your reply and help. Pls find the link in private content.

Best regards,
Clem

Please, contact administrator
for this information.

#173551 Copied

Rose Tyler

Support staff

September 27, 2017 at 10:24

Could you provide me temporary admin panel access? http://prntscr.com/gq93wj

Regards

#173552 Copied

Bleausard

Participant

September 27, 2017 at 10:53

Dear Rose, thanks.

Sure, see private section.

Clem

Please, contact administrator
for this information.

#173561 Copied
Rose Tyler

Support staff

September 27, 2017 at 12:57
1. You may use this code:
```
.step-wrapper #billing_city_field {
    width: 50%;
    padding-right: 10px;
}
.step-wrapper #billing_postcode_field {
    width: 50%;
    padding-left: 10px;
}
.step-wrapper #billing_email_field {
    width: 100%;
    padding-left: 0;
}
```
2.
```
.woocommerce-checkout .col-lg-5.col-md-5 {
    width: 100%;
}
#prev-step-payment {
    color: #fff;
    padding: 6px 18px;
    display: inline-block;
    background-color: #262626;
}
#order_payment_heading {
    border-bottom: 1px solid #e8d4d4;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
```
3.
```
.woocommerce .addresses h4 {
    border-top: 1px solid #e8d4d4;
    margin-top: 20px;
    padding-top: 20px;
}
.woocommerce .addresses {border-bottom: 1px solid #e8d4d4;}
.woocommerce-checkout .shop_table {
    background-color: white;
}
.woocommerce-checkout .shop_table td.product-name {
    width: 60%;
}
.woocommerce-checkout .wpf-umf-cart-upload-button.button {
    background-color: gainsboro;
    color: black !important;
}
.woocommerce-checkout .wpf-umf-cart-upload-button.button:hover {
    color: white !important;
}
#prev-step-order {
    color: #fff;
    padding: 6px 18px;
    display: inline-block;
    background-color: #262626;
}
.woocommerce-checkout .place-order.wc-gzd-place-order {
    float: right;
}
#order_review .legal {
    width: 100%;
}
```
4.
```
.cart-item-details {
    text-align: left;
}
.wpf-umf-cart-upload-button-container a {
    background-color: gainsboro;
    color: black !important;
}
.wpf-umf-cart-upload-button-container a:hover {
    color: white !important;
}
.woocommerce-cart-form__cart-item.cart_item td {
    vertical-align: top !important;
}
.woocommerce-cart .do-x-col .col-md-6 {
    margin-top: 20px;
    margin-right: 50%;
}
```
Regards
#173574 Copied
Bleausard

Participant

September 27, 2017 at 13:39

Dear Rose!

GREAT, thank you so much! All code is implemented in child theme and works. This is a huge step forward.

I will look further into your code to get an idea how to get some of the remaining fixes done. Hopefully I can resolve them on my own, at least some of them.

Many thanks,
Clem

#173581 Copied

Rose Tyler

Support staff

September 27, 2017 at 13:41

You’re welcome!

Regards

#173582 Copied
Tagged: best selling themes, checkout layout, shopping cart, user friendly, woocommerce
Viewing 8 results - 1 through 8 (of 8 total)