shortcode customization woocommerce

Hello Martin,
Could you please provide the link to that page with missing styles?

Gina
Themler Support

Hello Gina, thanks for your prompt answer,
https://www.nettix.com.pe/correo-en-la-nube

Almost at the end of the page,
thanks in advance,
Martin

Any update on this?
Please advise,
Msrtin

Martin,

This block indeed has default WooCommerce styling.
I can only suggest adding custom CSS code to override these styles.

Do you have a page where your own styling is used? If not, please, provide temporary access to the site so we could check the styles from within Themler.

Gina
Themler Support

Hello Gina,
Thanks,
In this page is styled ok.
https://www.nettix.com.pe/tienda

Please advise
Martin

Martin,

This block indeed has default WooCommerce styling.
I can only suggest adding custom CSS code to override these styles.

Do you have a page where your own styling is used? If not, please, provide temporary access to the site so we could check the styles from within Themler.

Gina
Themler Support

Please advise

Martin,
Sorry for the delay.

Add this code in Themler -> Home -> Settings -> Additional CSS:

.woocommerce ul.products li.product .price {
    line-height: 68.57142859px!important;
    font-weight: 400!important;
    font-size: 48px!important;
    color: #f1613a!important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
    color: #f1613a!important;
    text-decoration: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
line-height: 34.2857143px!important;
    font-size: 24px!important;
    text-transform: uppercase!important;
        font-weight: normal!important;
    }
.woocommerce ul.products li.product .button:hover {
    background-color: #317abe!important;
    text-decoration: none!important;
    color: #fff!important;
    border: 2px solid #317abe!important;
    background-image: none!important;}

.woocommerce ul.products li.product .button {
    text-decoration: none!important;
    border: 2px solid #317abe!important;
    color:#317abe!important;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    font-weight: 700!important;
    text-transform: uppercase!important;
    font-size: 16px!important;
    transition: all .3s ease-in-out!important;
    width: 100%!important;
    padding: 10px 30px;
    line-height: 22.85714286px;
    background-color:white!important;
}

Gina
Themler Support

Thanks for it Gina,
For the record, and may be somebody needs it, I found a CSS to make the shortcodes responsive.
Hope helps ,
have a great day and staysafe!

@media (max-width: 768px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce-page[class*=columns-] ul.products li.product,
.woocommerce[class*=columns-] ul.products li.product {
width: 100%;
float: left;
clear: both;
margin: 0 1% 2.992em;
}
}