Делаем магазин на WordPress (WooCommerce) часть 2

Это вторая часть, здесь первая.

 

Устанавливаем плагин Duplicator.

С его помощью мы будем делать бэкап нашего сайта.

Устанавливаем, создаем бэкап перед установкой WooCommerce.

 

Ставим WooCommerce

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

После установки в разделе "Страницы" автоматически  создадутся несколько страниц. Это:

Так же после установки для этих страниц создадутся автоматически шаблоны и будут они размещены в папке "wp-content/plugins/woocommerce/templates". Для того что бы нам менять эти шаблоны и чтобы они не затирались при обновлении WooCommerce, нам нужно всю папку "templates" перенести к себе в папку темы и переименовать в "WooCommerce". После этого в файл function.php нашей темы мы добавляем в конец строки, которые создадут правило о том, что бы брать шаблоны для WooCommerce из нашей темы и этим мы начнем раздел с нашими функциями.

Добавить

//МОИ ФУНКЦИИ
function woocommerce_support() {
    add_theme_support( 'woocommerce' );}

add_action( 'after_setup_theme', 'woocommerce_support' );

 

Создаем каталог и структуру каталога

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

Переходим в Товары - Категории, категорию, которая есть по умолчанию "Misc" оставляем. Далее создаем нужные нам категории ,без родителя. Затем переходим в раздел "Страницы" и переименовываем страницу "Магазин" в "Каталог", меняем постоянную ссылку на "catalog". 

Далее переходим Внешний вид - Настроить, открываем вкладку WooCommerce и устанавливаем две опции "Отображать категории" и "Показывать подкатегории".

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

Добавляем в function.php

/**Показывать пустые категории**/
add_filter( 'woocommerce_product_subcategories_hide_empty', '__return_false' );





/**Скрытие ненужной категории**/
add_filter( 'get_terms', 'ts_get_subcategory_terms', 10, 3 );
function ts_get_subcategory_terms( $terms, $taxonomies, $args ) {
$new_terms = array();
if ( in_array( 'product_cat', $taxonomies ) && ! is_admin() &&is_shop() ) {
foreach( $terms as $key => $term ) {
if ( !in_array( $term->slug, array( 'misc' ) ) ) { //ваш слаг категории
$new_terms[] = $term;
}}
$terms = $new_terms;
}
return $terms;}

Давайте настроим теперь правильные URL для наших страниц с категориями и товарами, для этого переходим Настройки - Постоянные ссылки и меняем:

За отображение каталога, как общего, так и  разделов подразделов, а так же за отображение товаров в категории у нас отвечает шаблон "archive-product.php", поэтому будем работать с ним, но прежде создадим копию этого файла на хостинге на всякий случай. И файл "archive-product.php" делаем следующего вида.

archive-product.php

<?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/
 * @package WooCommerce\Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header();
?>


Здесь будет контент по формированию страницы


<?php
get_footer();

По стандарту за циклический вид категорий и товаров у нас отвечает код ниже, поэтому разместив его в нашем примере мы получим страницу каталога и всех его разделов и товаров. Напишем в нашем archive-product.php.

Код archive-product.php

<?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/
 * @package WooCommerce\Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header();
?>





	<div class="container-001">
		<div class="container-001-content" style="padding: 100px 20px">
			<h1><?php woocommerce_page_title(); ?></h1>
<?php
if ( woocommerce_product_loop() ) {

	woocommerce_product_loop_start();

	if ( wc_get_loop_prop( 'total' ) ) {
		while ( have_posts() ) {
			the_post();
			do_action( 'woocommerce_shop_loop' );
			wc_get_template_part( 'content', 'product' );
		}
	}

	woocommerce_product_loop_end();

	do_action( 'woocommerce_after_shop_loop' );
} else {
	do_action( 'woocommerce_no_products_found' );
}

do_action( 'woocommerce_after_main_content' );
?>
		</div>
	</div>





<?php
get_footer();

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

Пример

<?php		
$url=$_SERVER['REQUEST_URI'].'/';
$url=str_replace(array('http://','//'),'',$url);
$level=substr_count($url,'/');
if (!$level) {$level=1;}
//echo $level;	
if ($level>="3" ) {
?>	

ЗДЕСЬ БУДУТ КАТЕГОРИИ И ПОДКАТЕГОРИИ

<?php
}
else
{
?>

ЗДЕСЬ БУДУТ КАРТОЧКИ ТОВАРОВ ОПРЕДЕЛЕННОЙ КАТЕГОРИИ

<?php
}
?>

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

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

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены