Изменить CSS столбца продукта WooCommerce только для страницы магазина - PullRequest
Новая
       30

Изменить CSS столбца продукта WooCommerce только для страницы магазина

0 голосов
/ 29 сентября 2018

Я использую последнюю версию Wordpress с темой Storefront Theme & Child.

Я хочу изменить height: и padding: столбцов для продуктов WooCommerce (на самом деле это категории, но они используют то же самоеколонны).На странице магазина только отображаются категории, которые не должны быть такими же высокими, как столбцы товаров (без категорий, без тега продажи, без покупки или добавления в корзину и т. Д. По категориям)

Я использую этот небольшой кусочек PHP в моих функциях для дочерних тем, чтобы попытаться реализовать это, но, похоже, он ничего не меняет и не выдает никаких ошибок: 

function dayles_custom_shop_columns()
{
    if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    } else {
       //Do nothing.
    }
}

Я также пробовалэто с помощью! важно видеть, есть ли какая-либо разница.Но нет.

Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Чтобы сделать цикл товара на странице магазина такой же высоты, оберните все элементы цикла в свой пользовательский элемент div и затем напишите свой стиль.

Вставьте приведенный ниже код в текущую активную тему функции.php file 

function start_before_shop_loop_item() {
   echo '<div class="custom_shop_loop_wrap">';
}
function end_after_shop_loop_item() {
  echo '</div>';
}
add_action( 'woocommerce_before_shop_loop_item', 'start_before_shop_loop_item', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'end_after_shop_loop_item', 10 );

Затем с помощью класса custom_shop_loop_wrap добавьте свой стиль. 

function custom_css_add_wrap(){?>
<style>
    .custom_shop_loop_wrap{
      height:height:320px;
      max-height:320px;
}
</style>
   <?php }
add_action('wp_head', 'custom_css_add_wrap' );
0 голосов
/ 29 сентября 2018

Вам необходимо добавить хук действия wp_head в свои функции:

Пример: 

function my_custom_css() {
     if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    }
}
add_action('wp_head', 'my_custom_css' );

Дополнительная информация о действии wp_head here.

...