Return to previous page

Advanced Cart – Checkout Section On Theme Options

This topic has 19 replies, 2 voices, and was last updated 1 years, 4 months ago ago by Tony Rodriguez

TFS

Participant

November 23, 2022 at 06:19

Hello,

I just discovered the cart/checkout layout on the XStore section area.
This is very cool I have never seen anything like this on other themes.

I do have some questions If you would not mind answering 🙂

1) Is this method popular? I can see this is optional and once activated the websites full top header and bottom header disappear. The bottom is replaced by something else. I think this is something like the Shopify setup?
The top website header and footer disappear once the customer enter the payment process.

Is this a good thing or will keeping the original header and footer be a “better choice?
I think Shopify gets rid of everything so the customer has no distraction and this option does that for us.

2) The Multi Step layout looks very nice.

– Can I edit the top text? I want to capitalize each word. The words cart/details/payment should be;

Cart
Details
Payment

3) The background color is gray. Can this be changed?

4) Is the advanced form label the animation that is appearing on the proceed to checkout page? It is an arrow when I activate it.

5) I can see the footer has an option, to keep the default one or make another one. Is there any benefit to either, or is this based on choice?

6) If I click “use a header builder” the header (the main one) comes back and also the top menu (logo with text) which has the text, shopping cart – billing details – Payment – Order Status goes below. Is there anyway to keep the header (the main one) and then have the top menu (logo with text) show up as it would If “use a header builder” was not checked and under the header menu (the main one)

Thanks!

#339328 Copied Theme version: 8.3.7

18 Answers

Tony Rodriguez

Support staff

November 23, 2022 at 08:43

Hello, @TFS,

1- We just added a new feature so that our customers have more than 1 option to use on their site. Obviously it helps customers to secure payment without any distraction. If you like the way it works you can use it. It will not harm your site.

2- In order to solve your issue simply go to the Dashboard >> XStore >> Theme OPtions >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.

.cart-checkout-nav-simple a{text-transform:capitalize !important;}

Then save settings and check back to your site after clearing the browser cache.

3- Navigate to the Dashboard >> XSTORE >> Theme Settings >> WooCommerce >> Cart/Checkout Layout >> from there you can change the color. See the image: Under Private Content Area

4- No, this option will only enable the animation on the checkout page like when you move to the next step from the checkout page or back to the checkout page.

5- It’s based on choice. The idea is to show only the footer new or the basic one that’s all. If you need to show other content on the cart and checkout page in the footer then you can use this option but if not then you can show the default footer on these pages as well as simply.

6- Sorry to say, that there is no option if you enable the header builder from there it will work like this and you cannot change it from the theme settings. Changes require customization. Second, If you want paid Customization services submit a customization request to WPKraken team.

Regards 8Themes Team.

Please contact administrator
for this information.

#339339 Copied

TFS

Participant

November 23, 2022 at 20:15

Hello Tony,

Thanks!

4) What does the “animation” look like? I have it activated but do no see anything for this.

#339417 Copied

TFS

Participant

November 23, 2022 at 20:28

Or to be exact what does this mean and what is it used for?

Advanced Form Label
Enable animated form label on checkout page.

#339419 Copied

TFS

Participant

November 23, 2022 at 20:42

Just a few more questions;

1) I am choosing the advanced layout – Classic option

But when I choose the multi step option, the proceed to checkout button gets an animation and an arrow, once hovered over they show.
This is not appearing on the classic option.

How can I get this on the classic option aswell?

2) When you choose the multi step layout, the elements get put into a white box and the background is grey colored.
I am selecting the classic option but everything on the page seems to be the color white.
How can we make the background as grey so it looks similar to the multi step layout? (background grey color, and the elements of the page in white colored boxes)

3) The cart is showing, you may be interested in products. How can we delete that section?

4) I have chosen the footer menu (special for the cart page), how can we edit the images? There is currently logos of; American Express, Mastercard, PayPal, visa.

#339421 Copied
Tony Rodriguez

Support staff

November 24, 2022 at 07:23
Hello, @TFS,

1- In order to solve your issue simply go to the Dashboard >> XStore >> Theme OPtions >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.

.cart-checkout-nav a:hover{color:black !important;}

Then save settings and check back to your site after clearing the browser cache.

2- To solve your issue simply go to the Dashboard >> XStore >> Theme OPtions >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.

.cart-checkout-advanced-layout .content-page{background:#f1f1f1 !important;}

Then save settings and check back to your site after clearing the browser cache.

3- Now, In order to solve your issue simply go to the Dashboard >> XStore >> Theme OPtions >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.
```
.cart-checkout-advanced-layout .products-title{display:none !important;}
.cross-sell-products{display:none !important;}
```
Then save settings and check back to your site after clearing the browser cache.

4- Actually, by default, the image will show but if you add any content the image will be removed automatically, and your content will start to appear as you can see in this image: Under Private Content Area

Regards 8Themes Team.

Please contact administrator
for this information.
#339445 Copied
TFS

Participant

November 24, 2022 at 15:56

Hello Tony,

Thank you very much

1) Just to confirm, that this code is for the arrow animation and color change once the proceed to button is hovered over? I added it and nothing happens so far.

The arrow animation is still not showing on the “classic layout”
It appears on the multi step layout, but I added the code and it does not show on the classic layout

The animation appears on the proceed to checkout button (on the cart page)
When it is not hovered over, it has an arrow on the right side, after the word checkout. Once hovered over, it has an animation and the color changes.

3) Thanks, they got removed!
4) Thanks, understood

5) What is the purpose of this;

Advanced Form Label
Enable animated form label on checkout page.

6) Is there anyway to increase the size of the logo? I have maxed it out on the options but it still looks small.
Is there any custom code for this?

7) I decided to use the Classic layout for the cart-checkout page.

I am having a glitch on the cart page,

Once I start to scroll down the section on the right side which contains the box (which has – cart totals, subtotal, total, and the proceed to checkout/continue shopping buttons)

That section also scrolls down which looks off. It does not stay put as it should.

So overall, that section should stay still and not move once someone scrolls downwards.

Please contact administrator
for this information.

#339529 Copied

Tony Rodriguez

Support staff

November 25, 2022 at 08:57

Hello, @TFS,

1- The code is for the process number and text and it will change the color while hover over it. There is a CSS code added in the theme see the image: Under Private Content Area it overrides that’s why the code doesn’t effect it.

The layouts “Classic” and “Multi-Step” both are different layouts with different styles so it makes total sense that a thing appear different on classic layout and different on the multi-step layout.

3- Alright, Sure.
4- Thanks for understanding.

5- Alright, To know what this function if for. Check this image and note that the option is turned off and see the labels: Under Private Content Area now see this image I enable the option and see the labels now: Under Private Content Area now compare both images to understand how this option works.

6- Navigate to the Dashboard >> Theme settings >> Header Builder >> Logo >> from there you can change the logo size see the image: Under Private Content Area

7- In order to solve your issue simply go to the Dashboard >> XStore >> Theme OPtions >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.

.cart-order-details{position:relative !important; top:auto !important;}

Then save settings and check back to your site after clearing the browser cache.

Regards 8Themes Team.

Please contact administrator
for this information.

#339600 Copied

TFS

Participant

November 25, 2022 at 20:40

Hello Tony,

Thanks for your reply.

1) Understood. Do you think it is better to have all 3 one color? Which one is more common per your experience?

5) Understood. For this aswell, I am guessing this is completely based on the preference?

6) This logo is on the cart page and not the one on the home page.
When I select advance cart page, there is an option to put a different logo for the cart page. I have maxed the size from the options there and am wondering if there is any code that can make the size bigger.

7) Thanks, but suddenly the section looks good and doesn’t glitch. Not sure how that got fixed on it’s own lol.

Please contact administrator
for this information.

#339668 Copied
Tony Rodriguez

Support staff

November 26, 2022 at 06:54
Hello, @TFS,

1. Yes it’s better to use a single color and you can change the opacity a bit while hovering over it, this will be the standard one, and it’s my personal opinion that it will look nice on your site.

5. Exactly, this is completely based on the preferences.

6. That is because the div under the header having that Logo is set to 25% of the width, and the Logo is under that div so it will not overtake the parent div space, that is the reason till the specific width, the logo stops getting bigger, you have to try with the below given CSS Code:
```
.woocommerce-cart #header .et_column.et_col-xs-3.et_col-xs-offset-0 {
    width: 50% !important;
}
.woocommerce-checkout #header .et_column.et_col-xs-3.et_col-xs-offset-0 {
    width: 50% !important;
}
```
7. Sound’s Good!!

I have added all the screenshots of this topic under private content area as per on your request.

Regards 8Themes Team.
#339695 Copied
TFS

Participant

November 26, 2022 at 07:22

Hello Tony,

1) Thanks!
Is there any code for the text for all words to become black and then once hovered over it has a little change in opacity as you mentioned?

5) Thanks!

6) I added the code and it would not change, but I think its okay the way it is because it lines perfectly with the other words lol
Please ignore this, its fine!

Thanks!

#339704 Copied

Tony Rodriguez

Support staff

November 26, 2022 at 07:32

Hello, @TFS,

1. Could you please share the screenshot of that section or Text and also share the page URL as well?

5. You’re Most Welcome!!

6. Ok Sound’s Good!!

Regards 8Themes Team.

#339707 Copied

TFS

Participant

November 26, 2022 at 07:52

Hello Tony,

Page provided on PCA

Thanks!

Please contact administrator
for this information.

#339712 Copied

Tony Rodriguez

Support staff

November 26, 2022 at 08:23

Hello, @TFS,

Please share the screenshot as well. You may upload the screenshots on https://imgbb.com/ and paste the links here.

Regards 8Themes Team.

#339716 Copied

TFS

Participant

November 26, 2022 at 08:50

Hello Tony,

I am referring to the cart page

The words on top right (after the logo);

Shopping cart
Checkout
Order status

How can I share a screenshot?

#339720 Copied
Tony Rodriguez

Support staff

November 26, 2022 at 09:36
Hello, @TFS,

1) Thanks!
Is there any code for the text for all words to become black and then once hovered over it has a little change in opacity as you mentioned?

Now, In order to solve your issue simply go to the Dashboard >> XStore >> Theme Settigns >> Theme Custom CSS >> Global and then paste the below code at the bottom of the CSS box there.
```
.cart-checkout-nav a:hover{color:black !important;
 opacity: 0.5 !important;
}

.cart-checkout-nav a {
    color: black !important;  
}
```
Then save settings and check back to your site after clearing the browser cache.

Regards 8Themes Team.
#339724 Copied
TFS

Participant

November 26, 2022 at 18:56

Hello Tony,

Thanks!

Is it possible for this to work only on the cart page and not the checkout page?

#339763 Copied

TFS

Participant

November 26, 2022 at 18:58

Hello Tony,

Sorry – please ignore it works great!

#339765 Copied

Tony Rodriguez

Support staff

November 27, 2022 at 05:23

Hello, @TFS,

You’re Most Welcome!!
Thanks for contacting us.

Have a nice weekend 🙂

Topic Closed.
Regards 8Themes Team.

#339782 Copied
Tagged: advanced cart, best selling, checkout section, seo friendly, woocommerce themes
Viewing 19 results - 1 through 19 (of 19 total)

The issue related to '‘Advanced Cart – Checkout Section On Theme Options’' has been successfully resolved, and the topic is now closed for further responses

Advanced Cart – Checkout Section On Theme Options

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection