Hello,
when editing the checkout page with Elementor and selecting the Checkout widget, would you please set the “Layout” option to “One column” in the widget’s settings? See this article. Let me know if this helps.
Hi,
Thanks for reply, but it is already set for one column (btw. You should see this from the link). I believe it is a bug in widget, but the real question is – how to fix or workaround it?
Do You want screenshots to deepen a view on the issue? Or can You click through the checkout to see, whats wrong?
Regards.
-
This reply was modified 4 years, 5 months ago by
zenconcept.
The Elementor Pro Checkout widget is very new. According to the changelog, it was added a month ago. Also, the widget is available only in the Elementor Pro.
On the linked website I do see that the checkout is placed as one column, but in the HTML code I see the following comments: “open column-1”, “close column-1”, “open column-2” and “close column-2”. Therefore I could only assume that the “Layout” option is set to “Two columns”.
Would you remove the Checkout widget and simply use the [woocommerce_checkout] shortcode instead?
Woow, it works, thanks!
I have the Elementor Pro, but I accidently removed automatically created WooCommerce pages and used this widget, because I tried to recreate them with strong effort unfortunately.
Great that this shortcode works!
Thanks a lot!
Ok, I’m glad that works.
Btw, if you need to recreate the WooCommerce pages, you can also use the “Create default WooCommerce pages” option on the “WP Admin -> WooCommerce -> Status -> Tools” page.
Great, thanks.
Although, I have one more question. I have the Elementor Pro, to edit WooCOmmerce a little bit. But when I’m using a shortcode, then this violet buttons, totally not compliant with my graphics appears and I have no idea, where should I change their color?
-
This reply was modified 4 years, 5 months ago by zenconcept.
-
This reply was modified 4 years, 5 months ago by zenconcept.
The buttons color comes from the WooCommerce plugin. It is the same color as the “Add to cart” (“Dodaj do koszyka”) button on the product page.
Normally the theme has some CSS rules defined for the <button> element or for elements with the “button” CSS class. It seems like the Hello theme doesn’t do that, but it relies on the CSS rules defined by Elementor.
The color can be changed by adding the following CSS rule to your website:
.woocommerce button.button.alt {
background-color: #00a99d !important;
}
You can use the “WP Admin -> Appearance -> Customize -> Additional CSS” page to add the CSS rule.
