Return to previous page

Shopping Cart & Woocommerce 3-Step Checkout Layout

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

  • Avatar: Bleausard
    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
    Avatar: Rose Tyler
    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
    Avatar: Bleausard
    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
    Avatar: Rose Tyler
    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
    Avatar: Bleausard
    Bleausard
    Participant
    September 27, 2017 at 10:53

    Dear Rose, thanks.

    Sure, see private section.

    Clem

    Please, contact administrator
    for this information.
    #173561 Copied
    Avatar: Rose Tyler
    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
    Avatar: Bleausard
    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
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 27, 2017 at 13:41

    You’re welcome!

    Regards

    #173582 Copied

  • Tagged: , , , ,

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Digital Marketing – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WordPress WooCommerce Theme
lazy-placeholder
Spice Store – WordPress WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Interior Store – WooCommerce Theme
lazy-placeholder
Bakery Store – WordPress WooCommerce Theme
lazy-placeholder
Hemp & CDB – WordPress WooCommerce Theme
lazy-placeholder
Wedding – WordPress Theme
lazy-placeholder
Interior – 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.