Issue with custom shortcode in WooCommercen and Colibri

Hello @mariosuper1342,

Thank you for reaching out to us with your inquiry.

It is the expected behavior that when you add content using a third party plugin to a page it will come with its own markup and styling rules that are associated with the product that was used to create it. This markup is separate from that of Colibri, and thus you will not be able to edit it in our Customizer as its markup will not be understood.

You can work around this limitation and style elements that have not been created using Colibri by adding your own CSS rules to style them. You can add your CSS in our Customizer > General Settings > Additional CSS.

If you require any assistance with styling your website using CSS I would kindly ask you to provide us with a link to your website and more information on the modifications you want to make in order for us to be able to further assist.

If you are a pro user of Colibri we’d kindly ask you to get in touch with us using the contact form linked below:
https://colibriwp.com/#support

Thank you for your understanding. I wish you a lovely day ahead!

Thanks, @extendthemes! I’m trying to make this webpage’s WooCommerce form link1, similar in style to this other webpage’s default WooCommerce form link2.

I’ll have a look at CSS designing, but I appreciate any suggestion.

• This reply was modified 3 years ago by mariosuper1342.

Hello,

To achieve a result similar to the second link you have provided us with please add the CSS snippet below in your Customizer > General Settings > Additional CSS.

.page-id-807 #custom > div > form.woocommerce-ResetPassword {
font-size: 15px!important;
box-sizing: border-box!important;
padding: 20px!important;
border-radius: 5px!important;
border: 2px solid rgb(211, 206, 210)!important;
}

.page-id-807 input#user_login {
font-size: 1rem!important;
height: 2.5rem!important;
border: none!important;
}

.page-id-807 form button.woocommerce-Button.button {
background-color: #303e7a!important;
color: #fff!important;
font-size: 12px!important;
font-family: 'Open Sans'!important;
font-weight: 600!important;
padding: 12.8px 24px!important;
}

Be sure to let us know if it achieved the desired result and if you require any further assistance.

I wish you a lovely day ahead!

@extendthemes Thank you very much! It worked like a charm!