[Resolved] help with CSS woocommerce

[Leonardo]

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.

[Ying]

Hi 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;
    }
}

[Leonardo]

Hello 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 ….

[Leonardo]

Another 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.

[Ying]

When 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.

[Leonardo]

Unfortunately, it doesn’t work, Ying.

Thanks.

[Ying]

Another 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.

[Leonardo]

I 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

[Fernando]

Hi 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

[Leonardo]

Thank you, Fernando!

[Leonardo]

One 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.

[Leo]

Please open a new topic for the separate question.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts