Separate price and number of items on checkout link in mobile

[ProductionMD1986]

Hi,
I followed this link to show a checkout link outside the menu on mobile:

Woocommerce checkout link on mobile

Hi again, To show the cart icon outside the mobile menu, try adding the following code in the Theme Options > JS: jQuery(document).ready(function($){ $('.x-nav-wrap.mobile li.x-menu-item-woocommerce').addClass('cart-menu-item-x').insertAfter('.x-btn-navbar'); }); Then add the following code in the Theme Options > CSS: @media screen and (min-width: 980px) { .cart-menu-item-x { display: none; } } @media screen and (max-width: 979px) { .cart-menu-item-x { float: rig…

It worked perfectly, but the price and the number of items are glued together. How can I add a hyphen or a space?

Thank you.

[ruenel]

Hello @ProductionMD1986,

Thanks for writing in! You will need to find the container class of price and the numbers items so you can add a custom CSS that will applies a margin into the containers to create a gap between the containers.

Be advised that custom CSS coding is beyond the scope of our support already under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[ProductionMD1986]

Hi,
This code did the trick (it added a margin to the number of items and changed its color):

.inner {
margin-left:5px;
color: #9b9a9a;
}

[prakash_s]

Hello @ProductionMD1986,

Glad that you were able to get the solutions. Please feel free to open a new thread if you have any more concerns.

Thanks