Woocommerce товары таблицей или как изменить шаблон категории товаров - Исправление ошибок и поиск оптимальных решений проблем

На просторах интернета встречается несколько способов изменения вывода шаблона категории товаров в Woocommerce. По умолчанию интернет магазина на базе Woocommerce и шаблона Storefront отображает товары в категории в виде плитки, количество блоков плитки можно менять через соответствующие хуки в файле функций шаблона.

В первую очередь, что бы править шаблоны вывода, не забудьте из папки плагина Woocommerce/templates скопировать необходимые для редактирования файлы в папку «ваша тема»/woocommerce/. Если папки «woocommerce» в папке с вашей темой нет, тогда создайте её. Все файлы переносить не нужно, берите только те что вы будете править, если не знаете какой файл за что отвечает, перенесите все — потом методом «нучного тыка» определите ваш, а остальные — удалите.

Итак как же изменить вывод товаров в категории от привычного что есть в шаблонах Woo.

Например — на «Тостере» советуют:

Начальные тэг таблиц:
<table class="shop_table cart" cellspacing="0">
  <thead>
    <tr>
      <th class="product-name"><?php _e( 'Product', 'woocommerce' ); ?></th>
      <th class="product-price"><?php _e( 'Price', 'woocommerce' ); ?></th>
      <th class="product-price"></th>
    </tr>
  </thead>

   <tbody>
был помещен в другой файл в этом шаблоне — loop/loop-start.php.
Ну и соответственно конечный тэг таблицы был помещен в loop/loop-end.php.

А сам код вывода данных таблицы помещают в «content-product.php»

А ресурс «ИглуЧит» советует в файле шаблона function.php прописать следующий код:

<?php /* Изменяем отображение товара в табличный вид  */
add_action('woocommerce_before_shop_loop', 'table_loop_head',40);
function table_loop_head( ) {
?>
<table class="loop_table loop" cellspacing="0">
/* Вывод заголовков таблицы. Можно добавлять/менять/удалять строки. */
    <thead>
        <tr>
            <th class="product_table"><?php _e( 'Товар', 'woocommerce' ); ?></th> 
            <th class="product_table"><?php _e( 'Категория', 'woocommerce' ); ?></th>
            <th class="product_table"><?php _e( 'Тип', 'woocommerce' ); ?></th>
            <th class="product_table"><?php _e( 'Производитель', 'woocommerce' ); ?></th>
            <th class="product_table"><?php _e( 'Цена', 'woocommerce' ); ?></th>
            <th class="product-table">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
<?php
}
add_action('woocommerce_after_shop_loop', 'table_loop_closetag',9);
function table_loop_closetag( ) {
?>
</tbody></table>
<?php
} ?>

и в файле content-product.php после строки

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

вставить

/* Здесь мы меняем вывод информации о товаре в табличный вид, согласно заголовкам, записанным в function.php */
<tr>
        <td class="product_table"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></td> // Наименование
       
        <td class="product_table"><?php echo ($product->get_attribute( 'cat' )); ?></td>  // Категория
       
        <td class="product_table"><?php echo ($product->get_attribute( 'type' )); ?></td>  // Тип товара
       
        <td class="product_table"><?php echo ($product->get_attribute( 'vendor' )); ?></td>  // Производитель
       
        <td class="product_table"><?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?></td> // Цена
       
        <td class="product-table"><?php do_action( 'woocommerce_after_shop_loop_item' ); ?></td> // Кнопка "Добавить в корзину"
      </tr>

Данные решения будут работать, но возможно вы запутаетесь, что и где править или что делать если нужно будет расширить данные возможности табличного отображения, например кнопкой выбора шаблона для пользователей, как это сделано в популярных интернет магазинах.

Итак, еще одно решение от Zixn.ru(т.е от нас)

Подготовка

Скопируйте файл из «/wp-content/plugins/woocommerce/templates/content-product.php» в «/Ваш_Шаблон/woocommerce/content-product.php»

Создайте файл «/Ваш_Шаблон/woocommerce/content-tables.php» и скопируйте в него следующий код:

<?php
/**
 * Шаблон табличного отображения товаров в категории
 */
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

global $product;

// Ensure visibility
if (empty($product) || !$product->is_visible()) {
    return;
}
if (stripos(woocommerce_get_product_thumbnail(), 'placeholder.png') !== FALSE) {
    $styleImage = 'product-table-image-no';
} else {
    $styleImage = 'product-table-image';
}
?>
<tr class="productDescription">
    <td class="<?php echo $styleImage; ?>"><?php echo woocommerce_get_product_thumbnail(); ?></td>
    <td class="product-table-title"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></td> 
<!--    <td class="product-table-manufactur"><?php echo ($product->get_attribute('manufacture')); ?></td> -->
    <td class="product-table-price"><?php do_action('woocommerce_after_shop_loop_item_title'); ?></td> 
    <td class="product-table-button"><?php do_action('woocommerce_after_shop_loop_item'); ?></td> 
</tr>

3. Создайте файл(но только если у вас его еще там нет) «/Ваш_Шаблон/woocommerce/archive-product.php». Это стандартный файл шаблона Woocommerce, если вы уже его кастомизировали, то рекомендую найти разницу в коде и взять то что вам нужно. Код для этого файла следующий:

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

get_header('shop');
?>

<?php
/**
 * woocommerce_before_main_content hook.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 */
do_action('woocommerce_before_main_content');
?>

<?php if (apply_filters('woocommerce_show_page_title', true)) : ?>

    <h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

<?php endif; ?>

<?php
/**
 * woocommerce_archive_description hook.
 *
 * @hooked woocommerce_taxonomy_archive_description - 10
 * @hooked woocommerce_product_archive_description - 10
 */
do_action('woocommerce_archive_description');
?>



<?php if (have_posts()) : ?>

    <?php
    /**
     * woocommerce_before_shop_loop hook.
     *
     * @hooked woocommerce_result_count - 20
     * @hooked woocommerce_catalog_ordering - 30
     */
    do_action('woocommerce_before_shop_loop');
    ?>
    <div class="templateBlockSelector">
        <a href="<?php echo add_query_arg(array('cat_templete' => 'list')); ?>"><i class="fa fa-list fa-2x" aria-hidden="true"></i></a>
        <a href="<?php echo add_query_arg(array('cat_templete' => 'table')); ?>"><i class="fa fa-table fa-2x" aria-hidden="true"></i></a>
    </div>
    <?php woocommerce_product_loop_start(); ?>

    <?php woocommerce_product_subcategories(); ?>

    <?php
    global $VIEW_TEMPLATE;
    ?>
    <?php if ($VIEW_TEMPLATE == 'table') { ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php wc_get_template_part('content', 'product'); ?>
        <?php endwhile; // end of the loop. ?>
    <?php } else { ?>
        <table class="productTemplateTables">
            <?php while (have_posts()) : the_post(); ?>
                <?php wc_get_template_part('content', 'tables'); ?>
            <?php endwhile; // end of the loop. ?>
        </table>
    <?php } ?>

    <?php woocommerce_product_loop_end(); ?>

    <?php
    /**
     * woocommerce_after_shop_loop hook.
     *
     * @hooked woocommerce_pagination - 10
     */
    remove_action('woocommerce_after_shop_loop', 'woocommerce_pagination', 10);
    do_action('woocommerce_after_shop_loop');
    ?>

<?php elseif (!woocommerce_product_subcategories(array('before' => woocommerce_product_loop_start(false), 'after' => woocommerce_product_loop_end(false)))) : ?>

    <?php wc_get_template('loop/no-products-found.php'); ?>

<?php endif; ?>

<?php
/**
 * woocommerce_after_main_content hook.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */
do_action('woocommerce_after_main_content');
?>

<?php
/**
 * woocommerce_sidebar hook.
 *
 * @hooked woocommerce_get_sidebar - 10
 */
do_action('woocommerce_sidebar');
?>

<?php get_footer('shop'); ?>

Всё, почва для шаблона готова и теперь маленький штрих для того что бы можно было выбрать между стандартным шаблоном и вашим.

Заходим в файл «»/Ваш_Шаблон/functions.php» и дописывам хук + функцию

add_action('woocommerce_before_shop_loop', 'setTempleteCategory');

/**
 * Устанавливает режим просмотра категорий товаров
 * @global type $VIEW_TEMPLATE
 */
function setTempleteCategory() {
    global $VIEW_TEMPLATE;

    if (isset($_REQUEST['cat_templete'])) {
        if ($_REQUEST['cat_templete'] == 'list') {
            $VIEW_TEMPLATE = 'list';
            setcookie("view_template_product", "", time() - 3600);
            setcookie('view_template_product', 'list', time() + 60 * 60 * 24 * 30);
        } elseif ($_REQUEST['cat_templete'] == 'table') {
            $VIEW_TEMPLATE = 'table';
            setcookie("view_template_product", "", time() - 3600);
            setcookie('view_template_product', 'table', time() + 60 * 60 * 24 * 30);
        } else {
            $VIEW_TEMPLATE = 'table';
        }
    } else {
        if (isset($_COOKIE['view_template_product'])) {
            if ($_COOKIE['view_template_product'] == 'list') {
                $VIEW_TEMPLATE = 'list';
            } elseif ($_COOKIE['view_template_product'] == 'table') {
                $VIEW_TEMPLATE = 'table';
            }
        } else {
            $VIEW_TEMPLATE = 'table';
        }
    }
}

Немного поясню: В файле «/Ваш_Шаблон/woocommerce/archive-product.php» при помощи глобальной переменной «VIEW_TEMPLATE» и условия «IF» проиcходит определение того, какой файл шаблона подключить(табличный или стандартный). Так же данный файл дополнен блоком

    <div class="templateBlockSelector">
        <a href="<?php echo add_query_arg(array('cat_templete' => 'list')); ?>"><i class="fa fa-list fa-2x" aria-hidden="true"></i></a>
        <a href="<?php echo add_query_arg(array('cat_templete' => 'table')); ?>"><i class="fa fa-table fa-2x" aria-hidden="true"></i></a>
    </div>

Для отображения двух «пиктограм» выбора шаблона.

Код который мы добавили в файл function.php следит за наличием GET переменных и устанавливает соответсвующее значение в глобальную переменную «VIEW_TEMPLATE», при этом значение записывается в куки — что бы выбранный шаблон отображался у пользователя всегда пока есть куки сайта.

Так же вам может понадобиться подключить дополнительные стили:

Для отображения «пиктограм» здесь используется библиотека «font awesome» — если вам не нужны эти значки, вы можете прописать свой стиль или оставить просто текст.
В любом случаем вам потребуется «допилить» стиль отображения под себя, не забывайте подключить дополнительный файл стилей для «комфортной» правки. Например свой файл стилей можно подключить через хук в файле function.php
```
add_action('wp_enqueue_scripts', 'jsThemeInclude');

function jsThemeInclude() {
      wp_enqueue_style('pruduct-customize', get_stylesheet_directory_uri() . '/css/product-table.css');
}
```
Если вы всё сделали верно для создания шаблона табличного вывода товаров в Woocommerce, то результат определённо вас порадует, ну а вот что получилось у нас:

Woocommerce табличный вывод товаров
upd: 11.2018

Важно, если ваш шаблон сайта содержит в корне файл «woocommerce.php» тогда любые изменения файла «/Ваш_Шаблон/woocommerce/archive-product.php» игнорируются и этот способ вам не поможет пока вы не модифицируете свой шаблон что бы он работал без файла «woocommerce.php»

О наличие этот файла в вашем шаблоне вам сообщит Woocommerce из админки сайта. Пример на скриншоте ниже:

Источник

В данной статье будет рассмотрен метод изменения шаблонов плагина Woocommerce.

Разделение шаблонов категории и товара

Первым делом надо разделить общий шаблон woocommerce.php на woocommerce-product.php и woocommerce-category.php. Делаем это простой проверкой:

<?php get_header(); ?>

<div align="center" class="wrapper">
<div class="wrapper-2">

<div id="main-content">

<?php if ( is_product() ) : ?>

<?php get_template_part( 'woocommerce-product' ); ?>

<?php else: ?>

<?php get_template_part( 'woocommerce-category' ); ?>

<?php endif; ?>

</div> <!-- end main-content -->
</div>
</div>
<?php get_footer(); ?>

Редактирование шаблона WC

В специально созданном include файле для функций woocommerce прописываем и комментируем отключение всех хуков шаблонов WC.

// Отключаем стандартные хуки wordpress (категория товара)

//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); // sale_flash вставлен в сам шаблон + percentage
//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

//remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

//remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );



// Отключаем стандартные хуки wordpress (карточка товара)

//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );



// Добавить хлебные крошки под заголовок
add_action( 'woocommerce_before_shop_loop', 'woocommerce_breadcrumb', 4 ); //В категориях
add_action( 'the_woocommerce_single_title', 'woocommerce_breadcrumb', 6 ); //В карточке товара

Если нужно воздействовать на какой-либо из элементов шаблона — открываем соответствующую строку и чтоб не запутаться следом приписываем «пункт назначения» (если необходимо) и порядковый номер.

Для шаблона товара (content-single-product.php) есть еще 2 хука, которые здесь не внесены в предложенную структуру., т.к. их отключение может нести разрушительные последствия для шаблона.

Открывающий и закрывающий хуки

do_action( ‘woocommerce_before_single_product’ );
do_action( ‘woocommerce_after_single_product’ );

При этом их можно так же задействовать для переноса в них других элементов шаблона.

Собственный хук для шаблона WC

Любой элемент WC можно поместить в произвольное место. Для этого открываем соответствующую строку удалив элемент из стандартной и структуры и привязываем его к собственному хуку:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  
add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );

В самом шаблоне в том месте где нужно выводить хук ставим

<?php do_action( 'the_woocommerce_single_title' ); ?>

Изменение стилей Woocommerce

Пользовательские стили для WC лучше подключать НЕ через общее подключение стилей в functions, а в специальном include для WC. В этом случае стили из нашего файла css будут перекрывать стандартные стили WC без !important.

// Добавляем свою таблицу стилей для woocommerce

function wp_enqueue_woocommerce_style(){
	wp_register_style( 'tester-woocommerce', get_template_directory_uri() . '/woocommerce.css' );
	
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'tester-woocommerce' );
	}
}

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

Можно полностью отключить стандартные стили woocommerce

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.

Источник

Предлагаем простой и мощный способ создавать таблицы для каталога WooCommerce-товаров. Такой способ идеален для крупных каталогов, где много товаров, так как в этом случае ваш список товаров будет упорядочен в виде таблицы, по которой удобно искать, используя фильтры.

Вы можете создать простой каталог, доступный только для чтения, или же форму заказа с кнопками «Добавить в корзину». Этот мануал научит вас создавать впечатляющий каталог, используя великолепный плагин Product Table.

Этот WooCommerce-плагин каталога товаров идеален для создания одностраничного каталога ваших товаров. Он упрощает покупателям поиск по товарам. Шаблон каталога отображает товары более аккуратно и компактно, если сравнивать со стандартный шаблоном WooCommerce.

Шаблон каталога позволяет отображать больше товаров на одной странице, так что ваши клиенты увидят все разом. Это идеальный вариант, ели вам нужна более крупная таблица каталога, в которой вы можете отобразить сотни и даже тысячи WooCommerce-товаров.

Кому нужен WooCommerce-плагин каталога товаров?

WooCommerce-плагин каталога товаров будет полезен любому сайту, который нуждается в дружественном к пользователю способе отображения множества товаров. Товары отображаются в виде структурированной таблицы или шаблона-сетки, так что на странице помещается больше товаров. Такой товарный каталог будет включать разные ухищрения, помогающие быстро найти определенный товар, используя поиск, фильтры и прочие опции.

Шаблоны товарного каталога можно использовать по-разному, например:

Форма заказа WooCommerce – ваш каталог может включать кнопки «Добавить в корзину» или боксы для галочек, необходимые для того, чтоб сразу добавить несколько товаров. Это решение позволяет вам добавить к WooCommerce-каталогу полноценную форму заказа. Или вы можете скрыть функциональность добавления в корзину, создав только лишь читабельный каталог.

WooCommerce-система заказа еды – Ресторанный бизнес или сервис доставки еды также может извлечь выгоду из этого плагина, позволив людям просматривать меню и заказывать еду online.
Товарная директория – товарный каталог также может функционировать, как полноценная WooCommerce директория с большим количеством товаров, отображенных в удобном формате.
WooCommerce -каталог оптовых продаж – WooCommerce Product Table – очень популярный выбор для создания каталогов оптовых продаж. Если вы расположите свои товары в таком удобном каталоге, то вашим пользователям будет значительно легче найти и заказать то, что надо.
Также этот плагин можно использовать в купе с другим расширением под названием WooCommerce Password Protected Categories, что позволяет создать оптовую секцию, которая существует отдельно от основного магазина.

Какие функции может иметь WooCommerce-таблица товарного каталога?

Плагин WooCommerce product catalog позволяет создать ничем не ограниченный товарный каталог, в котором собрана всевозможная информация о каждом товаре, включая колонки для:

Название товара
Короткое и длинное описание
Атрибуты
Кнопка «Добавить в корзину» (можно использовать с количественным селектором и товарными вариациями или без)
Изображение товара
Цена
Наличие
Артикул
Категории товаров
Теги
Кастомные поля (которые могут включать различную информацию, например, HTML-ссылки, шорткоды других плагинов, картинки, видео, аудио проигрыватели и многое другое.)
Кастомные таксономии

И не только:

Также есть множество дополнительных функций, которые касаются того, как отображается каталог и взаимодействия с ним пользователей. К примеру, вы можете добавить выпадающие фильтр-меню для категории, тега, атрибутов и кастомных таксономий. Вы можете добавить виджеты сайдбара, чтоб фильтровать по атрибутам, цене или рейтингу. Вы можете показывать или скрывать все элементы, включая поля поиска. Даже есть опции, позволяющие управлять отзывчивостью каталога на мобильных устройствах.

Также вы можете создать либо один большой каталог со всеми вашими WooCommerce товарами, либо поделить его на секции. Например, вы можете иметь отдельные таблицы для товаров с определенными категориями, тегами или значениями кастомных полей.

Как создать полноценный каталог товаров:

Для начала вам понадобятся 2 плагина

WooCommerce (бесплатный плагин, который можно скачать из WordPressхранилища плагинов)

WooCommerce Product Table

Теперь следуйте нашим инструкциям.

1. Создайте страницу для WooCommerce-таблицы каталога товаров.

Сначала создайте новую страницу для каталога товаров. Для этого перейдите в Страницы > Добавить новую в админке WordPress. Назовите страницу, как хотите, например, ‘Product Catalog’.

2. Введите дефолтный шорткод WooCommerce Product Table.

Теперь введите шорткод WooCommerce Product Table, который создаст таблицу, отображающую весь ваш каталог товаров (мы добавим больше колонок в следующем шаге!). Этот шорткод отобразит ваши товары в виде таблицы, где товары можно искать и сортировать.

Опубликуйте страницу и кликните «Просмотр страницы», чтоб увидеть вашу WooCommerce таблицу каталога товаров.

Вы увидите динамичный каталог, в котором перечислены все WooCommerce товары. Сейчас здесь используются дефолтные заголовки колонок – они могут, как подходить вашему каталогу, так и не подходить, но мы это скоро исправим. Эти колонки включают название товара, краткое описание, цена и кнопка «добавить в корзину»:

3. Выбираем колонки для отображения в вашей таблице WooCommerce каталога товаров.

Теперь я покажу вам, как выбрать данные для включения в таблицу, чтоб сделать WooCommerce каталог товаров более удобным.

Давайте внесем изменения в шорткод WooCommerce Product Table, тем самым отредактировав колонки, отображающиеся в каталоге. Возвращаемся к редактированию страницы вашего товарного каталога и заменяем шорткод по умолчанию этим:

Код:

[product_table columns="sku,name,description,categories,att:size,tags,price"]

Так мы добавим параметр ‘columns’ в шорткод. В примере выше я добавил следующие колонки:

SKU– уникальный идентификатор товара. Многие товарные каталоги включают код товара или ID, что позволяет легко найти товар.
Title – главный заголовок для вашего товара
Description – длинное описание для WooCommerce-товара.
Categories – так мы говорим каталогу, что он должен отображать фильтрованную колонку, в которой перечислены категории, к которым относится тот или иной товар. Клиенты могут кликнуть на категорию, чтоб выбрать товары только из этой категории
att:size – так мы говорим товарному каталогу включать колонку для атрибута ‘размер’. Используйте этот формат для любых товарных атрибутов, которые вы хотите включить в каталог. Вместо ‘размера’, добавьте слот для любого атрибута вашего WooCommerce магазина.
tags – так мы добавляем фильтруемую колонку, которая перечисляет теги для каждого товара.
price – так мы говорим WooCommerce Product Table отображать поле «Цена»

можно также использовать и другие колонки из соответствующей базы

Теперь обновите и просмотрите вашу страницу. Вы увидите, что таблица превратилась в полезный WooCommerce каталог товаров. И вот 7 колонок, которые вошли в шорткод таблицы товаров:

4. Добавьте фильтры в WooCommerce-таблицу каталога товаров

Еще одна полезная опция в WooCommerce Product Table – это возможность добавлять выпадающие фильтры и фильтр-виджеты, чтоб клиенты могли быстро и легко находить товары в вашем каталоге

Выпадающие фильтры WooCommerce каталога

Чтоб добавить выпадающие фильтры, добавьте filters=»true» в шорткод товарной таблицы. Например:

Код:

[product_table columns="sku,name,description,categories,att:size,tags,price" filters="true"]

Виджеты-фильтры WooCommerce-товаров

Данный плагин также идет с собственной версией всех WooCommerce-виджетов фильтрации. Есть виджет, показывающий активные фильтры, фильтр послойной навигаци, который перечисляет атрибуты товара, слайдер цен и фильтр рейтингов.

Убедитесь, что каталог находится на странице, которая содержит шорткод таблицы товаров и имеет слайдер область. Вы можете добавить фильтр-виджеты, открыв Внешний вид > Виджеты и выбрав фильтры, которые начинаются с ‘Product Table’ для добавления в ваш слайдер. Фильтр-виджеты появятся на страницах вашего товарного каталога, но не затронут остальной сайт.

Как создать доступный только для чтения товарный каталог и отключить онлайн заказ

чтоб сделать это есть два способа:

Способ первый – Создание товарной таблицы, доступной только для чтения

Итак, вот что вам нужно сделать:

Вариант первый: Удалите колонку ‘add-to-cart’ из шорткода таблицы товаров WooCommerce.

Отключите ссылки

на страницы единичных товаров

Вариант второй – используйте плагин YITH WooCommerce Catalog Mode

В качестве альтернативы можно использовать бесплатный плагин YITH WooCommerce Catalog Mode, который автоматически отключает возможность покупать онлайн.

Какую бы опцию вы не выбрали, теперь ваши клиенты смогут только просматривать каталог, без возможности добавлять товары в корзину и покупать онлайн.

Использование вашего WooCommerce каталога товаров

«Поиграть» с вашим WooCommerce каталогом можно на демо сайте плагина

Как видите, ваши клиенты могут много, что делать с таким каталогом. Они могут кликнуть на заголовок, чтоб увидеть саму страницу товара (хотя эту ссылку можно отключить, если нужно). Они могут кликнуть на категорию товара или тег, чтоб включить фильтр по этой категории. Также можно использовать форы поиска, чтоб находить нужные товары.

Клиенты также могут кликнуть на заголовки колонок, чтоб заказать товары из этой колонки.

Перейти к плагину

Источник

От автора: при планировании WooCommerce-магазина вам придется ответить на много вопросов, которые серьезно повлияют на будущий успех сайта. Настройка магазина — серьезный вызов. После завершения этого процесса уже сложно внести какие-то правки в настройки и дизайн. Для кастомизации страниц товаров в Woocommerce вам потребуется рассмотреть доступные варианты, о которых я и расскажу в этом посте.

И вот, магазин создан. Следующий вызов — беспорядок на страницах товаров. На странице WooCommerce Single Product есть множество элементов, которые не напрямую могут помочь с кастомизацией дизайна и настройкой магазина. Два главных виновника беспорядка — категории товаров и звезды рейтинга. Не каждому магазину нужны эти элементы на странице Single Product. Так же и другие элементы необходимо передвинуть, чтобы они вписывались в кастомный дизайн магазина.

Все эти сложности можно легко решить с помощью экшенов и хуков в WooCommerce. Для демонстрации возможностей кастомизации страницы товара я создал несколько экшенов и хуков.

Кастомизируйте страницы товаров в WooCommerce

Первое, что вы должны хотеть — это сменить шаблон отображения товаров. Для этого необходимо загрузить файл single-product.php, который контролирует файлы шаблонов, которые, в свою очередь, отображают информацию о товарах на frontend’е.

Самый распространенный совет при настройке шаблонных страниц родительских тем и плагинов — делайте копии шаблонов темы. Все изменения делайте с копией. Такой подход гарантирует вам сохранность ваших изменений в случае обновления тем и плагинов.

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

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

С помощью single-product.php я буду вызывать файлы шаблона, которые отвечают за информацию о товаре и формат ее отображения на странице. Файл content-single-product.php — шаблон товара. Именно этот файл необходимо редактировать, чтобы изменить информацию и стили страницы товаров.

А теперь откройте single_template и вставьте следующий код, чтобы изменить шаблон страницы Single Product:

function get_custom_post_type_template($single_template) {

global $post;

if ($post—>post_type == ‘product’) {

$single_template = dirname( __FILE__ ) . ‘/single-template.php’;

}

return $single_template;

}

add_filter( ‘single_template’, ‘get_custom_post_type_template’ );

as well as following code include in template _include

add_filter( ‘template_include’, ‘portfolio_page_template’, 99 );

function portfolio_page_template( $template ) {

if ( is_page( ‘slug’ ) ) {

$new_template = locate_template( array( ‘single-template.php’ ) );

if ( » != $new_template ) {

return $new_template ;

}

return $template;

}

Создайте кастомные товары/категории в WooCommerce

На этом этапе я предполагаю, что у вас уже есть работающий WooCommerce-магазин, и вы знакомы с процессом настройки страницы товаров и категорий. Существует бесконечное множество причин для создания пользовательских страниц товаров и категорий. Для этого необходимо настроить пользовательский шаблон этих шаблонов.

Настройте файлы шаблонов в WooCommerce

При работе с файлом content-single-product.php необходимо помнить следующее: любые добавленные товары и категории должны вставляться в конец файла. Еще одна хорошая практика — назовите файл так, чтобы он выделялся и был легко узнаваем. Например, если у вас есть категория «Books», назовите файл content-single-product-books.php. Такая небольшая правка гарантирует, что вы моментально определите файл для определенной категории. Этот файл отвечает за все изменения, которые необходимы, чтобы страницы товаров и категорий выглядели ровно так, как вы хотели (добавление или удаление сайдбара, изменение в цикле и т.д.).

Далее необходимо изменить файл single-product.php. В файле есть цикл, который отвечает за то, какие шаблоны необходимо загрузить для отображения товаров.

Я добавлю условие if, которое будет проверять принадлежность товара к определенной категории, после чего загружать связанный single-product.php в кастомный шаблон. Этот файл можно не переименовывать. Перед вставкой кода найдите в этом файле следующую строку:

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

woocommerce_get_template_part( ‘content’, ‘single-product’ );

Ее необходимо заменить на следующий код:

global $post;

$terms = wp_get_post_terms( $post—>ID, ‘product_cat’ );

foreach ( $terms as $term ) $categories[] = $term—>slug;

if ( in_array( ‘YOURCATEGORY’, $categories ) ) {

woocommerce_get_template_part( ‘content’, ‘single-product-YOURCATEGORY’ );

} else {

woocommerce_get_template_part( ‘content’, ‘single-product’ );

}

В этом коде найдите YOURCATEGORY и замените на свое сокращение категории. Также вы можете переименовать файл content-single-product.php. На примере с категорией выше «Books» файл single-product.php был переименован в content-single-product-books.php. Сейчас код такой:

global $post;

$terms = wp_get_post_terms( $post—>ID, ‘product_cat’ );

foreach ( $terms as $term ) $categories[] = $term—>slug;

if ( in_array( ‘books’, $categories ) ) {

woocommerce_get_template_part( ‘content’, ‘single-product-books’ );

} else {

woocommerce_get_template_part( ‘content’, ‘single-product’ );

}

К данному этапу все файлы успешно отредактированы и/или переименованы. Следующий шаг — загрузить их в WooCommerce-магазин. Чтобы все прошло гладко, создайте в директории темы папку /woocommerce/. Не забывайте, что оба файла (content-single-product.php и single-product.php) необходимо поместить в одну папку. Хорошая практика — изменять элементы кода в этой папке темы, чтобы предотвратить сложные для дебага ошибки при перезаписи оригинальных файлов WooCommerce.

Последний этап — проверить страницы товара и категорий на то, что изменения, внесенные в код, применились и идеально отображаются на экране.

Заключение

Кастомизация страниц товаров и категорий WooCommerce — это добавление и изменение хуков. Вот и вся наука. Важно понять, что все изменения напрямую влияют на рендеринг этих двух страниц на frontend’е магазина. Если вам необходимо помочь с кодом или с чем-либо еще, пишите в комментариях, и я отвечу вам.

Автор: Muhammad Owais Alam

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Бесплатный курс «Создание тем на WordPress. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц

Скачать курс

WordPress. Создание интернет-магазина на WooCommerce

Узнайте, как создать полноценный интернет-магазин на WooCommerce

Подробнее

Источник

Один размер не подходит всем.

Существует стандартный макет, который большинство покупателей ожидают от магазина электронной коммерции. То есть миниатюры продуктов выложены в ряд строк с названием и ценой ниже. Но то, что этот дизайн подходит большинству покупателей, не означает, что он идеален для всех.

Если вы продаете товары оптом через оптовые продажи или ваши клиенты часто покупают сразу несколько товаров, лучше всего подойдет стол.

Использование таблицы продуктов дает несколько основных преимуществ.

Во-первых, покупатели могут быстро добавить в корзину несколько продуктов в любом количестве. Во-вторых, продукты намного проще просматривать по названию. И в-третьих, параметры поиска и фильтрации доступны прямо в верхней части таблицы.

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

Плагины таблицы продуктов WooCommerce

Каждый плагин отлично подходит для добавления таблиц продуктов на ваш сайт. Все они включают в себя базовые функции, которые вам нужны: макет таблицы с поиском и фильтрами, кнопки «Добавить в корзину» и поддержку вариантов продукта.

Тем не менее, внешний вид и параметры меняются от одного плагина к другому. Обязательно внимательно изучите каждый плагин и просмотрите их живые демонстрации, чтобы выбрать лучший для своего сайта.

Вот мой выбор лучших плагинов для таблиц продуктов для WooCommerce.

1 таблица продуктов WooCommerce

Посмотреть плагин сейчас

Описание плагина

Таблица продуктов WooCommerce заслужила рекомендацию № 1 в этой коллекции по нескольким причинам. Во-первых, у него отличный дизайн. Он не только отлично выглядит, но также включает в себя панель поиска и фильтры. Это позволяет пользователям сузить область поиска до определенной категории, цвета, размера или ключевого слова с помощью панели поиска.

Таблицы продуктов, созданные с помощью этого плагина премиум-класса, могут быть добавлены в любом месте вашего сайта, поскольку доступны как шорткод, так и блок Гутенберга. В меню настроек вы можете настроить размер изображений, метки столбцов, количество строк и многое другое. Этот плагин также идеально подходит для объединения с оптовым плагином, чтобы покупатели могли быстро создать оптовый заказ в вашем магазине.

Узнать больше →
2 Таблица продуктов Woo Pro

Посмотреть плагин сейчас

Описание плагина

Woo Product Table Pro – это многофункциональный плагин для размещения ваших продуктов на вашем сайте.

Одна из причин выбрать этот плагин – его долгая история обновлений. Он существует уже несколько лет и был обновлен до версии 7.0, включая еще больше функций. Некоторые из этих функций включают мгновенный поиск, сортировку и фильтры, быстрые кнопки «добавить в корзину» и возможность переопределить страницы магазинов и категорий. Последний вариант удобен, поскольку позволяет использовать таблицу продуктов на странице магазина вместо публикации таблицы в другом месте.

В целом, это хороший выбор для добавления таблицы продуктов в ваш магазин WooCommerce.

Узнать больше →
3 Страница простого заказа YITH

Посмотреть плагин сейчас

Описание плагина

YITH Easy Order Page – еще один отличный вариант для упрощения процесса заказа. Основное отличие этого плагина от других заключается в том, что он имеет как таблицу, так и сетку. Выбор отображения сетки делает изображения намного больше и может быть лучшим выбором для визуальных продуктов. Сетка также хорошо работает с вариациями продукта – вы можете нажать кнопку выше, чтобы посетить демонстрацию и посмотреть, как она работает.

Этот плагин WooCommerce также имеет отличную систему для создания таблиц ваших продуктов. Вы можете создать таблицу со всеми своими продуктами или сузить ее по тегу или категории. Затем вы получите шорткод, который можно скопировать и вставить на любую страницу своего сайта. Есть также множество вариантов стиля, элементы управления для отображения информации для каждого продукта и возможность ограничить видимость таблицы для определенных посетителей.

В целом, это стильный и гибкий выбор для добавления таблицы продуктов в ваш магазин WooCommerce.

Узнать больше →
4 таблицы продуктов для WooCommerce

Посмотреть плагин сейчас

Описание плагина

Таблицы продуктов для WooCommerce – это доступное решение для создания таблицы продуктов, которое доступно в магазине расширений WooCommerce.com. Это хороший выбор для оптовиков и магазинов электронной коммерции B2B.

Одна интересная особенность этого плагина – опция массовых действий. В верхней части таблицы есть кнопка для одновременного добавления нескольких продуктов в корзину и флажки рядом с каждым продуктом для их выбора. Это позволяет вашим клиентам быстро сделать крупный оптовый заказ.

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

Узнать больше →
5 Таблица продуктов WooCommerce

Посмотреть плагин сейчас

Описание плагина

Этот пятый плагин имеет то же имя, что и первый, но это отдельный продукт, доступный на CodeCanyon. Включено несколько выдающихся функций.

С помощью этого плагина вы можете создавать столько таблиц, сколько хотите, и настраивать их все по отдельности. Если вам нужно изменить стили из одной таблицы в другую, вам понравится функция диспетчера шаблонов. Точно так же диспетчер столбцов позволяет вам переупорядочивать и изменять размер столбцов в таблицах по своему вкусу.

В то время как каждый плагин, перечисленный здесь, позволяет вам выбирать продукты для включения через категорию и тег, WooCommerce Product Table идет намного дальше. Он включает мощный конструктор запросов для выбора именно правильных продуктов для таблицы. Это включает в себя возможность выбора рекомендуемых продуктов, продуктов со скидкой или только продуктов, имеющихся в наличии.

Если вам нужна большая гибкость при выборе продуктов для вашего стола или дизайна стола, WooCommerce Product Table может быть лучшим плагином для вашего сайта.

Узнать больше →

Какой плагин таблицы товаров лучше?

Когда вы впервые начали читать этот пост, вы, возможно, волновались, что найдете хотя бы один хороший плагин, но теперь вы нашли пять!

Новая задача – выбрать лучший, поэтому вот несколько советов.

Таблица продуктов WooCommerce от Barn2 – лучшая рекомендация, потому что это наиболее продуманный вариант. Дизайн великолепен, им легко пользоваться, и он включает в себя хороший набор опций настройки.

Woo Product Table Pro – достойная альтернатива, если вам нужна еще большая гибкость и возможность полностью заменить страницу вашего магазина таблицей продуктов.

Последний плагин, который я здесь выделю, – это YITH Easy Order Page. Это лучший выбор, если вы хотите использовать отображение сетки для своих продуктов, при этом упрощая одновременное добавление многих товаров в корзину.

Спасибо, что прочитали эту коллекцию лучших плагинов для таблиц продуктов WooCommerce. Надеюсь, это помогло вам найти идеальный плагин для вашего магазина.

Источник

Шаблоны WooCommerce — файлы, которые содержат разметку и структуру шаблонов вашего Интернет-магазина.

Иерархия шаблонов построена таким образом, что можно легко изменять и дополнять шаблоны, да и вообще сразу понятно что где находится и что за что отвечает.

Основные шаблоны:

archive-product.php — шаблон главного цикла вывода товаров
content-product.php — шаблон вывода товара
content-product_cat.php — шаблон вывода товара в категории
content-single-product.php — шаблон вывода одиночного товара
content-widget-price-filter.php — шаблон вывода виджета фильтра цен на товары
content-widget-product.php — шаблон вывода товара в стандартных виджетах
content-widget-reviews.php — шаблон выводит отзывы о товарах в виджетах
product-searchform.php — шаблон формы поиска товаров
single-product.php — основной шаблон карточки товара
single-product-reviews.php — шаблон вывода комментариев
taxonomy-product_cat.php — шаблон выводит товары категории, вызывает archive-product.php
taxonomy-product_tag.php — шаблон выводит товары метки, вызывает шаблон архива archive-product.php

Шаблоны для работы с корзиной

cart/cart.php — шаблон вывода корзины
cart/cart-empty.php — шаблон вывода пустой корзины
cart/cart-item-data.php — шаблон элементов данных + вариаций в корзине
cart/cart-shipping.php — шаблон получения методов доставки в корзине
cart/cart-totals.php — шаблон итоговых сумм
cart/cross-sells.php — шаблон перекрестных продаж
cart/mini-cart.php — шаблон вывода мини-корзины в виджете
cart/shipping-calculator.php — шаблон калькулятора доставки
proceed-to-checkout-button.php — шаблон кнопки «Оформить заказ». Содержит разметку для кнопки «Перейти к оформлению заказа» в корзине.

Шаблоны оформления заказа:

checkout/cart-errors.php — шаблон ошибок при оформлении заказа
checkout/form-billing.php — шаблон формы платежной информации
checkout/form-checkout.php — шаблон формы оформления заказа
checkout/form-coupon.php — шаблон формы купона
checkout/form-login.php — шаблон формы входа при оформлении заказа
checkout/form-pay.php — шаблон формы оплаты
checkout/form-shipping.php — шаблон формы доставки
checkout/payment.php — шаблон оплаты при оформлении заказа
checkout/payment-method.php — шаблон вывода метода оплаты, из шаблона checkout/payment.php
checkout/review-order.php — шаблон просмотра таблицы заказа
checkout/thankyou.php — шаблон вывода сообщения после оформлении заказа
checkout/terms.php — Сроки и условия оформления заказа

Шаблоны общего назначения

global/breadcrumb.php — шаблон вывода «хлебных крошек»
global/form-login.php — шаблон формы авторизации
global/quantity-input.php — шаблон поля количества для добавления в корзину
global/sidebar.php — шаблон вывода сайдбара
global/wrapper-end.php — шаблон окончания обертки страницы
global/wrapper-start.php — шаблон начала обертки страницы

Шаблоны циклов:

loop/add-to-cart.php — шаблон добавление в корзину для цикла товаров
loop/loop-end.php — шаблон окончания цикла вывода товаров
loop/loop-start.php — шаблон начала цикла вывода товаров
loop/no-products-found.php — шаблон вывода информации о не найденных товарах
loop/orderby.php — показывает опции для сортировки
loop/pagination.php — шаблон пагинации
loop/price.php — вывод цены товара
loop/rating.php — шаблон вывода суммарного рейтинга
loop/result-count.php — выводит общее количество товаров в цикле
loop/sale-flash.php — шаблон продаж в цикле товаров

Личный кабинет:

myaccount/dashboard.php — панель управления учетной записью. Показывает первый вводный экран
myaccount/downloads.php — страница “Мои загрузки”
myaccount/form-add-payment-method.php — шаблон добавления метода оплаты
myaccount/form-edit-account.php — шаблон формы редактирования своего аккаунта
myaccount/form-edit-address.php — шаблон формы редактирования адреса
myaccount/form-login.php — шаблон формы входа в личный кабинет
myaccount/form-lost-password.php — форма “забыли пароль?”
myaccount/form-reset-password.php — форма сброса пароля
lost-password-confirmation.php — вывод текста при замене утерянного пароля
myaccount/my-account.php — шаблон вывода личного кабинета
myaccount/my-address.php — шаблон вывода адреса
myaccount/my-downloads.php — шаблон вывода скачанных товаров (устарел)
myaccount/my-orders.php — шаблон вывода заказов (устарел)
myaccount/navigation.php — навигация по аккаунту
myaccount/orders.php — выводит заказы
myaccount/payment-methods.php — показывает способы оплаты клиента на странице аккаунта
myaccount/view-order.php — шаблон просмотра заказа

Карточка товара:

single-product/add-to-cart/external.php — кнопка “Добавить в корзину” для внешнего (партнерского) товара (продукта)
single-product/add-to-cart/grouped.php — кнопка “Добавить в корзину” для сгруппированного товара
single-product/add-to-cart/simple.php — кнопка “Добавить в корзину” для простого товара
single-product/add-to-cart/variable.php — кнопка “Добавить в корзину” для вариативного товара
single-product/add-to-cart/variation-add-to-cart-button.php — кнопка “Добавить в корзину” для одиночной вариации
single-product/add-to-cart/variation.php — шаблон для одиночных вариаций
single-product/tabs/additional-information.php — шаблон вывода содержимого вкладки «Информация»
single-product/tabs/description.php — шаблон вывода содержимого вкладки «Описание»
single-product/tabs/tabs.php — шаблон вывода вкладок в карточке товара
single-product/meta.php — вывод метаданных товара: артикула, категорий, меток товара в карточке товара
single-product/price.php — шаблон вывода цены в карточке товара
single-product/product-attributes.php — шаблон вывода атрибутов товара
single-product/product-image.php — шаблон основной картинки в карточке товара
single-product/product-thumbnails.php — шаблон миниатюр в карточке товаров
single-product/rating.php — шаблон вывода рейтинга товара
single-product/related.php — шаблон вывода сопутствующих товаров
single-product/review.php — шаблон вывода комментариев
single-product/sale-flash.php — шаблон вывода метки «Распродажа» в карточке товара
single-product/share.php — шаблон вывода продукта обмена в карточке товара
single-product/short-description.php — шаблон вывода краткого описания в карточке товара
single-product/stock.php — показывает остаток товара на складе (управление остатками)
single-product/title.php — шаблон вывода заголовка товара в карточке товара
single-product/up-sells.php — шаблон вывода рекомендованных товаров

Шаблоны для работы с заказами:

order/form-tracking.php — шаблон вывода отслеживания заказа
order/order-again.php — шаблон кнопки «Повторить заказ»
order/order-details-customer.php — показывает данные заказа клиента
order/order-details-item.php — показывает детали заказа
order/order-details.php — шаблон таблицы заказа
order/order-downloads.php — заказ на скачивание товаров (продуктов)
order/tracking.php — шаблон вывода отслеживания заказа

Папка notices содержит шаблоны сообщений пользователю

Папка emails содержит шаблоны сообщений по электронной почте (шаблоны писем об оформлении заказа, отмене и т.д.)

Как редактировать?

Есть два способа изменения шаблонов

Использование хуков.

Каждый файл шаблона содержит хуки, с помощью которых вы можете изменять/добавлять или удалять контент без редактирования самих файлов шаблона.

Редактирование шаблонов.

В папке вашей темы создайте папку woocommerce. Скопируйте туда файлы шаблонов сохраняя иерархическую структуру вложенных файлов и папок.

Если вы хотите изменить только один из шаблонов, скопируйте только один необходимый файл и вносите изменения.

Например, нужно внести изменения в шаблон корзины. Скопируйте файл из папки woocommerce/templates/cart/cart.php в ваша_тема/woocommerce/cart/cart.php. После вы можете вносить изменения в файл cart.php.

Что касается стилей

WooCommerce содержит свои стили “из коробки”, то есть некоторые моменты вам придется переписывать, и иногда даже грубо через !important.

Но вы можете отключить стили прописав такую строчку в functions.php:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

В этом случае отключаться абсолютно все стили WooCommerce

Если нужно отключить определенные таблицы стилей, создайте функцию в functions.php и через нее отключите нужное:

unset( $enqueue_styles['здесь название таблицы стилей'] );

А затем подключите ваши стили

Какие css-стили можно отключить?

woocommerce-general — общие настройки оформления
woocommerce-layout — разметка макета
woocommerce-smallscreen — оптимизация под мобильные устройства

Источник

Разделение шаблонов категории и товара

Редактирование шаблона WC

Собственный хук для шаблона WC

Изменение стилей Woocommerce

Кастомизируйте страницы товаров в WooCommerce

Создайте кастомные товары/категории в WooCommerce

Настройте файлы шаблонов в WooCommerce

Заключение

WordPress. Создание интернет-магазина на WooCommerce

Плагины таблицы продуктов WooCommerce

1 таблица продуктов WooCommerce

Описание плагина

2 Таблица продуктов Woo Pro

Описание плагина

3 Страница простого заказа YITH

Описание плагина

4 таблицы продуктов для WooCommerce

Описание плагина

5 Таблица продуктов WooCommerce

Описание плагина

Какой плагин таблицы товаров лучше?

Основные шаблоны:

Шаблоны для работы с корзиной

Шаблоны оформления заказа:

Шаблоны общего назначения

Шаблоны циклов:

Личный кабинет:

Карточка товара:

Шаблоны для работы с заказами:

Как редактировать?

Что касается стилей