- This topic has 11 replies, 4 voices, and was last updated 1 year, 5 months ago by Leo.
-
AuthorPosts
-
October 12, 2022 at 8:19 am #2371258Leonardo
Hi!
I’m trying to tweak the woocommerce checkout page (https://formuladiecast.com.br/checkout/), but I think I need some help with CSS.
What I want to do is decrease the left column to increase the right one.
I got the first step with the CSS below (but I don’t know if it’s correct either)
.woocommerce .col2-set, .woocommerce-page .col2-set, .e-checkout__column e-checkout__column-start {
width: 70%;
}Now, I would like to increase the right column, for example, by another 30%.
Can you help me?
Data for private access.
Thanks.
October 12, 2022 at 10:06 am #2371367YingStaffCustomer SupportHi there,
The page is built with Elementor, GP has no control over it unfortunately.
It’s better to reach out to Elementor’s support for this.
However, before they get back to you, you can try removing your CSS and add this for now:
@media (min-width: 1025px) { .elementor-widget-woocommerce-checkout-page .e-checkout__container { grid-template-columns: 40% auto; } }
November 18, 2022 at 1:19 pm #2422152LeonardoHello guys. How are you?
After a lot of trying, I can’t in any way make the change I said above.
Ying’s css only works in the developer part of Chrome. When you save it in Customize, nothing happens…
I know you are not responsible for these third party changes, but I really don’t know what else to do…
If you. Kindly, can you give me a light, I will be eternally grateful ….
November 18, 2022 at 1:48 pm #2422175LeonardoAnother possible solution would be for you to help me style the shortcode [woocommerce_checkout] automatically generated by the plugin/theme.
In this case, I would not use the Elementor widget.
November 18, 2022 at 2:55 pm #2422225YingStaffCustomer SupportWhen you save it in Customize, nothing happens…
It’s likely you have an error in the previous CSS, try adding my CSS on top of the other CSS.
November 18, 2022 at 5:54 pm #2422311LeonardoUnfortunately, it doesn’t work, Ying.
Thanks.
November 19, 2022 at 12:57 pm #2423326YingStaffCustomer SupportAnother possible solution would be for you to help me style the shortcode [woocommerce_checkout] automatically generated by the plugin/theme.
It’s not controlled by GP, so this would be a request to Woocommerce support.
And what are you trying to achieve? It looks like you have achieved your goal which is decreasing left column and increasing right column.
November 20, 2022 at 6:32 pm #2424687LeonardoI was able to make the changes!
Could you just ask me a question?
If I want to change the place/order of things, should I mess with the HTML structure of the site?
Ex: https://formuladiecast.com.br/wp-content/uploads/2022/11/troca.jpg
November 20, 2022 at 6:59 pm #2424698Fernando Customer SupportHi Leonardo,
The current structure prevents the order you wish to accomplish. You’re correct, you’ll need to restructure HTML to address this order, however, as the Purchase Quantity is part of a form, I’m not sure if it’s possible.
What you can do instead with CSS is to re-order them like this: https://share.getcloudapp.com/jkuOrYbO
November 24, 2022 at 2:56 pm #2431939LeonardoThank you, Fernando!
November 24, 2022 at 3:28 pm #2431966LeonardoOne last question: I installed the Generate child theme.
To edit HTML, should I use an FTP client, for example FileZilla?
I thought I could edit the HTML in the WordPress dashboard itself.
November 24, 2022 at 3:36 pm #2431980LeoStaffCustomer SupportPlease open a new topic for the separate question.
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.