WOOT - Tablas de productos activos de WooCommerce

Skins

WOOT permite crear pieles y aplicarlas en cualquiera de sus tablas de productos.

Las máscaras predeterminadas están en: skins / skin-1.css, skins / skin-2.css,…, skins / skin-11.css

Para agregar su propia máscara en la carpeta de creación del sistema 'pieles de woot'en la carpeta del tema actual de WordPress, cree un archivo allí, por ejemplo'mi-personalizado1'y escriba el código CSS usando el siguiente código como ejemplo:

:root {
    --woot-my-custom1-color1: #99a0fc;/* borders */
    --woot-my-custom1-color2: #97C97C;/* slider bar */
    --woot-my-custom1-color3: #99a0fc;/* slider handlers */
    --woot-my-custom1-color4: #EEF5F1;/* slider container */
    --woot-my-custom1-color5: #1971CD;/* slider min/max */
    --woot-my-custom1-color6: #FFFFFF;/* slider span */
    --woot-my-custom1-color7: #CEEEDB;/* disabled switcher span */
    --woot-my-custom1-color8: #EEF5F1;/* disabled switcher before */
    --woot-my-custom1-color9: #34BF6C;/* enabled switcher span */
    --woot-my-custom1-color10: #EFAC34;/* enabled switcher before */
    --woot-my-custom1-color11: #7f54b3;/* buttons bg, table scrollbar bg */
    --woot-my-custom1-color12: #FFFFFF;/* buttons color */
    --woot-my-custom1-color13: #d9d7fa;/* selected column */
    --woot-my-custom1-color14: #25bf99;/* th bg */
    --woot-my-custom1-color15: #FFFFFF;/* th head color */
    --woot-my-custom1-color15-1: #423E3E;/* th foot color */
    --woot-my-custom1-color16: #99322b;/* add to cart button bg */
    --woot-my-custom1-color17: #fdf171;/* add to cart button icon color */
    --woot-my-custom1-color18: #FFF;/* add to cart button color */
    --woot-my-custom1-color19: #99a0fc;/* add to cart checkbox */
    --woot-my-custom1-color20: #FFF;/* woocommerce cart bg */
    --woot-my-custom1-color21: #FFFFFF;/* tr:nth-of-type(odd) */
    --woot-my-custom1-color22: #c8e1ff;/* tr:nth-of-type(even) */
    --woot-my-custom1-color23: #d9d7fa;/* tr:hover */
}


#tid.data-table-23 input[type='text'],
#tid.data-table-23 input[type='number'],
#tid.data-table-23 input[type='email'],
#tid.data-table-23 input[type='tel'],
#tid.data-table-23 input[type='url'],
#tid.data-table-23 input[type='password'],
#tid.data-table-23 input[type='search'],
#tid.data-table-23 textarea,
#tid.woot-filter-cell-type-select select,
#tid.data-table-23 button,
#tid.data-table-23 input,
#tid.data-table-23 select,
#tid.data-table-23 textarea,
#tid.data-table-23 .selectm23,
#tid .woot-woocommerce-cart,
#tid .woot-filter-navigation-label,
#tid .woot-tax-term,
#tid .woot-woocommerce-text-search-container[data-table-id="tid"] input[type='search']{
    border-color: var(--woot-my-custom1-color1) !important;
    outline-color: var(--woot-my-custom1-color1) !important;
}

#tid .woot-woocommerce-text-search-container[data-table-id="tid"] .woot-woocommerce-text-search-wrapper::-webkit-scrollbar {
    background: var(--woot-my-custom1-color4) !important;
}

#tid .woot-woocommerce-text-search-container[data-table-id="tid"] .woot-woocommerce-text-search-wrapper::-webkit-scrollbar-thumb {
    background: var(--woot-my-custom1-color2) !important;
}

#tid .ranger23-bar{
    background: var(--woot-my-custom1-color2) !important;
}

#tid .ranger23-handler-left,
#tid .ranger23-handler-right {
    background: var(--woot-my-custom1-color3) !important;
}

#tid .ranger23-container,
#tid .woot-filter-navigation-label{
    background: var(--woot-my-custom1-color4) !important;
}

#tid .ranger23-min,
#tid .ranger23-max,
#tid .woot-filter-navigation-label,
#tid .woot-tax-term{
    color: var(--woot-my-custom1-color5) !important;
}

#tid .ranger23-handler-left span,
#tid .ranger23-handler-right span {
    color: var(--woot-my-custom1-color6) !important;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#tid .switcher23-toggle span{
    background: var(--woot-my-custom1-color7) !important;
}

#tid .switcher23-toggle:before{
    background: var(--woot-my-custom1-color8) !important;
}

#tid .switcher23:checked + .switcher23-toggle span{
    background: var(--woot-my-custom1-color9) !important;
}

#tid .switcher23:checked + .switcher23-toggle:before{
    background: var(--woot-my-custom1-color10) !important;
}

#tid .woot-btn,
#tid .table23-print-btn,
#tid .table23-load-more-button a,
#tid .woot-add-to-cart-all-btn{
    background-color: var(--woot-my-custom1-color11) !important;
    color: var(--woot-my-custom1-color12) !important;
}

#tid .woot-num-cell{
    color: var(--woot-my-custom1-color11) !important;
    border-color: var(--woot-my-custom1-color14) !important;
}


#tid .table23-flow-header > div{
    color: var(--woot-my-custom1-color11) !important;
}

#tid.woot-data-table a.woot-btn{
    color: var(--woot-my-custom1-color12) !important;
}

#tid .horizontal-scrollbar23-handler{
    background-color: var(--woot-my-custom1-color11) !important;
    border-color: var(--woot-my-custom1-color11) !important;
}

#tid .horizontal-scrollbar23-track{
    border-color: var(--woot-my-custom1-color1) !important;
}

#tid table th.table23-order-asc,
#tid table th.table23-order-desc,
#tid table td.table23-order-asc,
#tid table td.table23-order-desc{
    background: var(--woot-my-custom1-color13) !important;
}

#tid.woot-data-table table thead th{
    background: var(--woot-my-custom1-color14) !important;
}


#tid.woot-data-table table thead th{
    color: var(--woot-my-custom1-color15);
}

#tid.woot-data-table table tfoot th{
    color: var(--woot-my-custom1-color15-1);
}

#tid table .woot-btn.woot-add-to-cart-btn,
#tid .woot_count_in_cart{
    background-color: var(--woot-my-custom1-color16) !important;
    color: var(--woot-my-custom1-color18) !important;
}

#tid .woot-btn.woot-add-to-cart-btn span{
    color: var(--woot-my-custom1-color17) !important;
}

#tid .woot-checkmark{
    background-color: var(--woot-my-custom1-color19) !important;
}

#tid .woot-woocommerce-cart{
    background: var(--woot-my-custom1-color20) !important;
}

#tid.data-table-23 table tbody tr:nth-of-type(odd) {
    background-color: var(--woot-my-custom1-color21) !important;
}

#tid.data-table-23 table tbody tr:nth-of-type(even) {
    background-color: var(--woot-my-custom1-color22) !important;
}

#tid.data-table-23 table tbody tr:hover {
    background-color: var(--woot-my-custom1-color23) !important;
}

#tid .table23-tr-notice,
#tid .table23-place-loader{
    background: repeating-linear-gradient(
        135deg,
        var(--woot-my-custom1-color3),
        var(--woot-my-custom1-color3) 10px,
        var(--woot-my-custom1-color4) 10px,
        var(--woot-my-custom1-color4) 20px
        ) !important;

    color: var(--woot-my-custom1-color14);
}


#tid .table23_td_cell .star-rating span::before,
#tid .table23_td_cell .star-rating::before{
    color: var(--woot-my-custom1-color11) !important;
}

#tid .selectm23-selected{
    color: var(--woot-my-custom1-color3) !important;
}

#tid .selectm23-option-selected, 
#tid .selectm23-option:hover {
    background: var(--woot-my-custom1-color4) !important;
    color: var(--woot-my-custom1-color3) !important;
}

#tid div.calendar23-label{
    background: var(--woot-my-custom1-color3) !important;
}

#tid.woot_woocommerce_tables .table23-display-cell-info{
    color: var(--woot-my-custom1-color3) !important;
    background: var(--woot-my-custom1-color4) !important;
    border-color: var(--woot-my-custom1-color2) !important;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


#tid.data-table-23 table th.table23-order-able.table23-order-asc:before, 
#tid.data-table-23 table th.table23-order-able.table23-order-desc:after{
    color: var(--woot-my-custom1-color12) !important;
}

#tid.data-table-23 table th.table23-order-able:before,
#tid.data-table-23 table th.table23-order-able:after{
    color: var(--woot-my-custom1-color15-1) !important;
}

#tid table th[data-key="add_to_cart"],
#tid table span[data-key="add_to_cart"],
#tid table b[data-key="add_to_cart"],
#tid table th[data-key="compare"],
#tid table span[data-key="compare"],
#tid table b[data-key="compare"],
#tid table th[data-key="favourites"],
#tid table span[data-key="favourites"],
#tid table b[data-key="favourites"]{
    color: #fdf171 !important;
    border-bottom-color: #fdf171 !important;
}

#tid .woot_compare_remove_btn{
    color: #9DFFB0 !important;
}

#tid .woot-data-table .table23_td_price, 
#tid .woot-data-table .table23_td_regular_price, 
#tid .woot-data-table .table23_td_sale_price {
    color: crimson;
}

#tid.woot-data-table table .table23_td_post_title,
#tid.woot-data-table table .table23_td_title,
#tid.woot-data-table table td a{
    color: var(--woot-my-custom1-color11);
}




Importante:: no olvide cambiar el nombre de las variables CSS como en las pantallas de arriba.

Establezca sus colores como variables y valores en la parte inferior del archivo y disfrute de los resultados.

Habilite la máscara en la página de Configuración:

O usa atributo piel, por ejemplo: [woot skin=’my-custom1′]