Add to Cart Popup Close Button

Hello,

How do I remove the background color on the Close button within the Add to Cart Popup? I have selected this option from within the theme settings, but I am not seeing any option to change the background of the close icon. See attached image.

Attachments:

You must be logged in to view attached files.

Hello,

When I add a product to a cart, I see the sidebar widget https://gyazo.com/8512e7aa9099e89b3064506ff4425464

Please describe the steps to see this popup.

We will provide the custom CSS.

Best Regards

Hello.

My “shopping cart” display has suddenly changed and is not inheriting my theme colors any longer. I have changed it back from the pop-up view to the “display widget”, however it does not look anything like the theme’s example. The view cart and checkout, is placed at the top instead of at the bottom, and there is no space around the contents in the widget and I would like the buttons to be stacked instead of side-by-side. Please assist.

In addition, I have added a screenshot of what it is looking like right now. The buttons are grey (does not reflect theme colors which have been changed), the buttons are not stacked (I would like them vertical and not side-by-side), and I am not seeing the text at the top of the widget (“Shopping Cart”).

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

See the access below.

Hello,

Has there been any update on this? I really need the button colors of this cart view to return to my theme set colors for buttons.

Hi,

You have overwritten theme colors, typography, form, and button styles via global Elementor forms settings. This setting is too global and is not designed for complicated eCommerce themes like Woodmart which have own style settings. Using Elementor global option will create conflict in various interface elements that Woodmart theme has. First, try to remove and reset all form settings from these Elementor option sections:

Global colors: https://prnt.sc/i10rIShFlYqG
Global fonts: https://prnt.sc/qsV1dSfcMKn9
Typography: https://prnt.sc/z9wue8bIck_P
Buttons: https://prnt.sc/_5NdFWw_Y_wq
Forms: https://prnt.sc/_5tQuYsiADxr

If you want to set theme styles, use the options located in Woodmart theme settings:

Colors: https://prnt.sc/U4fVc8fYjOva
Font and typography: https://prnt.sc/ZI14c4z9zVSx
Buttons: https://prnt.sc/W9tY8_Ltajcy
Forms: https://prnt.sc/vtay2CZzcOCP

Kind Regards

Hello,

I have removed all overwritten colors and fonts, however the buttons are still grey, even after adding a custom button style. Also, how do I return the buttons to stacked instead of side by side?

Hello,

Please deactivate all third party plugins except these ones and check again:

Slider Revolution
WPBakery Page Builder or Elementor
Woodmart Core
Contact Form 7
MailChimp for WordPress
WooCommerce
Safe SVG

Also, if you make changes on your site, make sure that you have cleared the browser and site cache before checking the issue. In your case, you are using WP Rocket plugin in which the cache needs to be cleared each time after you make changes on site. Screenshot (https://prnt.sc/bSpa730_EvS_). We also recommend you disable the cache plugin during the development process to ensure cached style conflicts.

Best Regards

Hello,

I have been clearing the cache after each entry or change made, however even after disable the plugins the buttons have not changed. Note, the buttons were the correct color before in side view, and I have not since added any new plugins to the site. The only difference was I changed the cart to the display widget. In pop up view, the buttons were the correct color but displaying very weird, that’s why I changed to the display widget instead.

Any other options you can suggest?

In addition, as you can see from your screenshots, after resetting all Elementor settings, the buttons are not configured correctly as the text color has changed from white, and quantity selectors are not showing properly.

Hi,

1. Quantity buttons missing styles. To fix the issue with missing styles of quantity buttons, you need to disable Optimize CSS delivery option in WP Rocket settings (https://prnt.sc/MVogBFFUwEwK).

2. Quantity buttons and popup close button broken styles. To fix the issue you need to remove or leave empty ALL Elementor global style settings for forms (https://prnt.sc/CqxM8n0ul26O) and buttons (https://prnt.sc/oFRWEHCrFLHg) which was suggested in previous reply.

3. Mini-cart dropdown layout. By default, our theme mini-cart looks like it showed in the following screenshot (https://prnt.sc/Spe3Dejs4sHz). Here is the link to the following demo page (https://woodmart.xtemos.com/demo-fashion/demo/fashion/). Mini-cart dropdown layout on your site is changed via some third-party plugin, which can’t be affected by our theme setting. To restore the default mini-cart layout, please deactivate all third-party plugins except these ones and check again:

Slider Revolution
WPBakery Page Builder or Elementor
Woodmart Core
Contact Form 7
MailChimp for WordPress
WooCommerce
Safe SVG

Make sure you have cleared all your site cache in WP Rocket plugin (https://prnt.sc/XjBtFDGr5EY1) after done following changes.

Kind Regards

I have deactivated all of my plugins except for those mentioned above. I do not have Mailchimp on my site. I have cleared ALL of Elementor settings for Text, Colors, Forms, etc.

What this did, was remove my styling for the Quantity selector, where the + and – is no longer showing. It also caused some of my buttons to show with a dark font on a dark background. In addition, the Dropdown Cart has not reverted to the theme’s default look, but instead is still showing with the grey buttons for both.

(Quantity buttons missing styles. To fix the issue with missing styles of quantity buttons, you need to disable Optimize CSS delivery option in WP Rocket settings (https://prnt.sc/MVogBFFUwEwK).) – I don’t see how this would’ve changed my quantity buttons missing styles when it worked all along. I have had my site working fine, for the past few months with this setting activated.

Cache has been cleared!

Could someone from your team please assist me with this matter? I keep going back and forth, where you all keep telling me to deactivate all plugins except for the ones mentioned…which was done numerous times.

Hi,

1. Quantity buttons missing styles. Optimize CSS delivery option in WP Rocket settings (https://prnt.sc/MVogBFFUwEwK) is still active on your site. To fix the issue with missing styles of quantity buttons, you need to disable this option in WP Rocket settings. The following option will cause issues in styles that are loading after the page is fully loaded, such as popup content and content that is added after AJAX and quantity buttons in product quick view is one of them. WP Rocket has its own alert that shows that the following options may cause style issues (https://prnt.sc/oCf8opWkf9zE).

2. Quantity buttons, broken styles. To fix the issue you need to remove or leave empty ALL Elementor global style settings for forms (https://prnt.sc/CqxM8n0ul26O) and buttons (https://prnt.sc/oFRWEHCrFLHg) which was suggested in previous reply. After checking your site, we still can see that your buttons (screenshot https://prnt.sc/8b2hcZCedCbt) and forms (screenshot https://prnt.sc/DnVsmaHFF1Y-) are affected by Elementor global site settings which need to be disabled.

3. Mini-cart dropdown layout. By default, our theme mini-cart looks like it showed in the following screenshot (https://prnt.sc/Spe3Dejs4sHz). Here is the link to the following demo page (https://woodmart.xtemos.com/demo-fashion/demo/fashion/). A third-party plugin that is changing the mini-cart layout was not disabled. To restore the default mini-cart layout, the following plugin needs to be disabled, since its button styles can’t be changed via our theme setting.

Before May 23 you were in contacting support staff, after that, you are contacting with theme developer. I am responsible for theme frontend styles. To fix the following issues, you need to do each changes that was suggested by us, in another case unfortunately we can’t help you because it doesn’t have other solutions. As an alternative, we can do the following changes for you and provide a list of changes that were done on your site, but for it, we need to have permission to do these changes. Also, the admin access that you provided earlier is not working anymore (https://prnt.sc/45I03vmuL1Bs) and to make changes on your site we need the new one.

Kind Regards

Hello Bogdan,

Thank you for your reply. When I wrote the post two days ago, all suggestions were done, including reset to all Elementor settings, disabling of WP Rocket optimization, and clearing of cache. As it did not work when I tried that, I have since restored my site to its backup that’s why you are seeing all of the settings restored.

If you would like, I would really appreciate it if you can go into the site and fix those issues, as apparently it is not working when I attempt it.

I will send site credentials again in a separate reply. Thanks.

Please see below access.

Hi,

We tried logging in with these credentials, but it didn’t work. Please check.

Kind Regards

Please try again using the credentials below.

Hi,

We have done the following changes to your site:

1. Disabled Optimize CSS Delivery option in the WPRocket plugin settings (https://prnt.sc/jTU_FI0wfZ4V).
2. Disabled custom Elementor settings Kit (https://prnt.sc/pEMZmdvLKkci), which overwrites theme styles. All button (https://prnt.sc/bgfZS3fBujak) and forms (https://prnt.sc/hqZecP0NvCoo) options are now reset to default values. Disabled custom code related to Elementor settings kits (https://prnt.sc/xu8FEwyvkY-1, https://prnt.sc/dYKP3kb4EnLI). Try to use Woodmart theme settings to control buttons and form styles in the future.
3. Disabled “Pro Elements” plugin (https://prnt.sc/6oG0FCRCi6Ro) which overwrites the mini-cart structure. Now mini-cart has a default theme structure (https://prnt.sc/fSZ1N_v3wVq0). Pay attention that cart has its own cache and to see the updated default mini-cart structure you need to first remove all products from your cart and add a new one.

Kind Regards

Hi,

Thank you for your assistance in fixing the cart issue. Two things I am unable to fix though since the settings have been reset:
On the Cart page, it is now overlapping the Footer. Not sure what settings have to be adjusted for this.
On the Checkout page, the form is inherited from the theme, however there are two fields identified in the attachment which is not in the same format as the other fields of the form. In addition, there are these symbols ** now appearing under each text item on the Checkout page. Could you please fix these for me or direct me where to fix?
Also, on my Contact form it inherited the form style but not the Button.
Thanks.

Attachments:

You must be logged in to view attached files.

Hi,

1. Issue on cart page is caused by following custom code (screenshot https://prnt.sc/1KjP5hmz9fgA). Try to remove it first.

2. Form on checkout page is affected by your custom code. To fix the following issue, try to remove all custom code related to the “select2” class. (screenshot https://prnt.sc/n0Sky4M9Uew4, https://prnt.sc/g0mn6ZBaauAP).

3. Contact form submit button have own control filed in the form editor. To change button styles, first try to navigate to the desired form edit page and add classes to submit button that will define it styles.

For example, to make your submit button with primary color and round shape, try to add following classes:
[submit class:btn class:btn-color-primary class:btn-style-round "Send message"]

Primary color and rounded shape:
[submit class:btn class:btn-color-primary class:btn-style-semi-round "Send message"]

Here is how it looks when classes are added (screenshot https://prnt.sc/nWUswektHRDM).

Kind Regards

Thanks Bogdan.

All of the items above I fixed except for number 2. Coding was removed, cache cleared, however it is still showing as in attachment. 2 fields different style from the rest, and the dots… are still appearing under each label. Any suggestions here, or can you fix?

Attachments:

You must be logged in to view attached files.

Hi,

1. Custom select input. Code related to “select2” input is still present on your site. Please check the screenshot (https://prnt.sc/ewKpocLSqTX_). Try to remove all code containing “select2” class name. You can click on custom code field and press Ctrl+F to open search and find all custom code related “select2”.

2. Dots under labels. Following dots is added by plugin styles called “ShopEngine”. You can disable the plugin or add the following small code snippet to the Global Custom CSS area in Theme Settings to remove the dots.

body abbr[title] {
	text-decoration: none;
}

Kind Regards

Thanks a lot for your help. It’s all fixed now.

You are welcome!

[Author]

Posts