Return to previous page

How to edit the cart in either the off-canvas or the dropdown state

This topic has 8 replies, 2 voices, and was last updated 3 weeks, 1 days ago ago by Tony Rodriguez

QaQako

Participant

June 12, 2024 at 22:47

Hi
i have a question : from where can i customise the part of the cart when you click on it, meaning when the content type is off-canvas or dropdown (not the cart page)

and thanks

Files is visible for topic creator and
support staff only.

#399519 Copied Theme version: 9.3.11

7 Answers

Tony Rodriguez

Support staff

June 13, 2024 at 06:35

Hello, @QaQako,

Thank you so much for purchasing our theme and contacting our support center.

We are reaching out to provide you with detailed instructions on how to customize the Mini Cart feature in Xstore. Please follow the steps outlined below:

1. Navigate to Xstore > Xstore Builders.
2. Select ‘Header’ and edit the current active header using Elementor.
3. Within Elementor, go to the Shopping Cart Widget and click on the “Content Tab.”
4. Proceed to the “Off Canvas/DropDown Section” where you can customize the Mini Cart.
5. After making the desired changes, click “Update” to save the modifications.

For your reference, an image has been provided in the private content area.

We trust this information will be of assistance to you. Should you require any further support, please do not hesitate to contact us. We are committed to ensuring your experience with our products is both productive and enjoyable.

Best regards,
The 8Theme Team

Please contact administrator
for this information.

#399539 Copied

QaQako

Participant

June 13, 2024 at 08:19

thanks for your answer but thats not what im looking for .
lets say i wanna make it appear like this mini cart in here https://xstore.8theme.com/elementor2/nft-crypto .
the only thing i managed to customize is the cloze tab and changing the background color to black, how can i customize the buttons : VIEWCART – CHECKOUT, the word : subtotal, the background when hovering and the name of the products, the shopping cart name that appears below the cart icon when showing the products in the cart (off-canvas), the price. i dont seem to find how to edit them (like typography colors etc…)

and thanks in advance for your time

#399562 Copied
Tony Rodriguez

Support staff

June 13, 2024 at 12:25
Hello, @QaQako,

We are reaching out to provide detailed instructions on how to customize the color and typography of the mini cart items on your website. Please follow the outlined steps below to make the necessary adjustments.

**1. View Cart Button:**

To modify the color and typography of the “View Cart” button, please navigate to:
– Xstore > Theme Options > Styling & Colors > Dark Buttons Section.
Here, you can change the color and typography according to your preferences.

For reference, please view the image here: (https://paste.pics/edit/R5XQA)

**2. Checkout Button:**

To change the color of the “Checkout” button, please go to:
– Xstore > Theme Options > Styling & Colors > Active Buttons Section.
Adjust the color and typography as needed.

For reference, view the image here: (https://paste.pics/edit/R5XUN)

**3. SubTotal Label:**

To customize the color and typography of the “SubTotal” label, add the following CSS code in:
– Xstore > Theme Options > Theme Custom CSS > Global CSS:
```
.cart-widget-subtotal span {
    font-size: 12px !important;
    text-transform: capitalize !important;
    color: green !important;
}

.cart-widget-subtotal span:hover {
    font-size: 12px !important;
    text-transform: capitalize !important;
    color: red !important;
}
```
You may view the result here: (https://paste.pics/edit/R5Y01)

**4. Product Names:**

To change the color of product names on hover, please add the following CSS code in:
– Xstore > Theme Options > Theme Custom CSS > Global CSS:
```
.woocommerce-mini-cart-item .product-title:hover {
    color: red;
}
```
For reference, view the result here: (https://paste.pics/edit/R5Y3S)

**5. Shopping Cart Word Label:**

To modify the color and typography of the “Shopping Cart” word label, add the following CSS code in:
– Xstore > Theme Options > Theme Custom CSS > Global CSS:
```
.etheme-elementor-off-canvas_content-head-label {
    font-size: 20px !important;
    text-transform: capitalize !important;
    color: green !important;
}

.etheme-elementor-off-canvas_content-head-label:hover {
    font-size: 20px !important;
    text-transform: capitalize !important;
    color: white !important;
}
```
You may view the result here: (https://paste.pics/edit/R5Y1W)

Please note that you can adjust the color and typography as per your requirements by changing the values in the provided code.

Should you require any further assistance or have any questions, please do not hesitate to reach out. We are here to support you.

Best Regards,
8Theme’s Team
#399600 Copied
QaQako

Participant

June 14, 2024 at 10:21

Hello, Tony Rodriguez,

thanks for your answer
i got another question how can i edit the appeareance of the product in the cart (like adding a rounded background color) and space between the products because if there is more than 1 product in the cart they look like they are sticked together

Best Regards,
QaQako

#399763 Copied

Tony Rodriguez

Support staff

June 14, 2024 at 11:25

Hello, @QaQako,

Thank you for your response.

Upon reviewing your site there is only one product added to the site. We are unable to see products stuck together in the cart. We recommend you please add more products to the site so we can check the appearance of the product in the cart and provide you with a solution accordingly.

In addition, we kindly request that you share your site’s wp-admin access credentials in the designated private content area. This will enable us to review your settings in detail and offer the most accurate support.

Thank you for your cooperation and we look forward to hearing from you soon.

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#399772 Copied

QaQako

Participant

June 14, 2024 at 18:14

its a cart from one of youre prebuilt websites

Please contact administrator
for this information.

#399861 Copied

Tony Rodriguez

Support staff

June 15, 2024 at 06:45

Hello, @QaQako,

1/ We have noticed that the products displayed in the mini cart on your website currently mirror those shown in the NFT2 crypto demo. For your reference, please review the images provided in the private content area of our support forum.

2/ To address this, we kindly request that you modify the appearance of the mini cart by following these steps:

1. Navigate to your WordPress dashboard.
2. Go to XStore Builders > Header builder via Elementor.
3. Select Shopping Cart > Off Canvas/Dropdown.
4. Make the necessary changes as per your requirements.

For further guidance, you may refer to the image provided here: (https://paste.pics/R6F1H).

Should you require additional assistance, please do not hesitate to initiate a new topic on our support forum at [XStore WordPress Support Forum](https://www.8theme.com/forums/xstore-wordpress-support-forum/). This will facilitate a more efficient support process and help us serve you better.

Thank you for your understanding and cooperation.

Best regards,
The 8Theme Team

Please contact administrator
for this information.

#399898 Copied
Tagged: customize woocommerce cart, dropdown cart modification, edit cart woocommerce, off-canvas cart editing, wordpress cart adjustments, wordpress woocommerce templates
Viewing 8 results - 1 through 8 (of 8 total)