Ответы пользователя по тегу WooСommerce
  • Как отображение вариаций woocommerce в ценнике?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    if ( $product->is_type('variable') ) {
    
    	foreach ( $product->get_available_variations() as $variation ) {
    
    		foreach ( wc_get_product($variation['variation_id'])->get_variation_attributes() as $attr ) {
    			echo wc_attribute_label( $attr );
    		}
    
    		$active_price = floatval($variation['display_price']);
    		$regular_price = floatval($variation['display_regular_price']);
    
    		if ( $active_price != $regular_price ){
    			$sale_price = $active_price;
    		}
    
    		echo '<span class="variation-prices"><strong>Price</strong>: '.$variation['price_html'].'</span><br>';
    
    	}
    
    }
    Ответ написан
  • Как сменить местоположение поиска на сайте Wordpress?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Если это тема не ваша, то в первую очередь нужно создать дочернюю тему и все изменения производить уже в ней.
    Находите в теме шаблон, в котором выводится поиск и копируете его в дочернюю тему.
    Находите шаблон, в котором выводится меню и тоже его копируете в дочернюю тему.
    Возможно это один шаблон.
    Вырезаете вывод поиска из одного места и вставляете его в другое место.
    Убеждаетесь, что все поламалось, потому что из-за поиска теперь не влазит мобильное меню или что-то в этом роде)
    Ответ написан
    3 комментария
  • WooCommerce! Автоматическое добавление 4 товаров в корзину как?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    add_action( 'template_redirect', 'add_product_to_cart' );
    function add_product_to_cart() {
    	if ( ! is_admin() ) {
    		$articles = array(157,158,159,160);
    		$found = false;
    
    		// check if product already in cart
    		if ( sizeof( WC()->cart->get_cart() ) > 0 ) {
    			foreach ( WC()->cart->get_cart() as $cart_item_key => $values ) {
    				$_product = $values['data'];
    
    				if (($key = array_search($_product->id, $articles)) !== false)
    					unset($articles[$key]);
    			}
    
    			// if product not found, add it
    			if ( count($articles) > 0 ) {
    				foreach ($articles as $article) {
    					WC()->cart->add_to_cart($article);
    				}
    			}
    		} else {
    			// if no products in cart, add it
    			foreach ($articles as $article) {
    				WC()->cart->add_to_cart( $article );
    			}
    		}
    	}
    }
    Ответ написан
  • Как в слайдере товаров, сделать чтобы миниатюры не строились друг по друга, а листались?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    пилить свой слайдер и прикручивать к теме
    Я делал на базе swiper как-то
    5f3c4d6222662213992461.png
    Но мозгов не хватило убрать панель с тамбами, когда картинка одна
    Ответ написан
    Комментировать
  • Как изменить "html скелет" товаров в woocommerce ( на стр shop, где сетка товаров)?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    интеграция верстки в вукоммерс идет двумя основными способами.
    1. Не вмешиваясь в разметку с помощью хуков меняете разметку. Вот пример кода:
    Смотреть

    // отключение сайдбара
    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    
    // отключить хлебные крошки
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
    
    // основной контейнер
    remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
    add_action( 'woocommerce_before_main_content', 'storm_output_content_wrapper_start', 10 );
    function storm_output_content_wrapper_start() {
    	?>
    	<div class="container-1000">
    	<?php
    }
    
    remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
    add_action( 'woocommerce_after_main_content', 'storm_output_content_wrapper_end', 40 );
    function storm_output_content_wrapper_end() {
    	?>
    	</div><!-- container-1000 -->
    	<?php
    }
    
    add_action( 'woocommerce_before_main_content', 'storm_archive_output_content_wrapper_start', 15 );
    function storm_archive_output_content_wrapper_start() {
    	if( is_shop() || is_product_category() ) {
    		?>
    		<div class="category-content">
    		<?php
    	}
    }
    
    add_action( 'woocommerce_before_main_content', 'storm_catalog_wrapper_start', 20 );
    function storm_catalog_wrapper_start() {
    	if( is_shop() || is_product_category() ) {
    		?>
    		<div class="catalog-list-wrapper">
    		<?php
    	}
    }
    
    //вывод хлебных крошек на странице архива
    add_action( 'woocommerce_before_main_content', 'storm_catalog_breadcrumbs', 25 );
    function storm_catalog_breadcrumbs() {
    	if( is_shop() || is_product_category() ) {
    		?>
    		<div class="breadcrumbs">
    			<?php woocommerce_breadcrumb() ?>
    		</div>
    		<?php
    	}
    }
    
    // Изменить стрелки пагинации
    add_filter( 'woocommerce_pagination_args', 'custom_woo_pagination' );
    function custom_woo_pagination( $args ) {
    	$args['prev_text'] = '<span class="fa fa-angle-left"></span><span class="sr-only">Previous page</span>'; 
    	$args['next_text'] = '<span class="fa fa-angle-right"></span><span class="sr-only">Next page</span>';
    	return $args;
    }
    
    // вывод пагинации
    remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
    add_action('woocommerce_after_shop_loop', 'storm_pagination', 10);
    function storm_pagination() {
    	?>
    	<div class="pagination-wrapper">
    		<?php woocommerce_pagination(); ?>
    	</div>
    	<?php
    }
    
    add_action( 'woocommerce_after_main_content', 'storm_catalog_wrapper_end', 15 );
    function storm_catalog_wrapper_end() {
    	if( is_shop() || is_product_category() ) {
    	?>
    		</div> <!-- catalog-list-wrapper  -->
    		<?php
    	}
    }
    
    // Вывод сайдбара на странице архива
    add_action( 'woocommerce_after_main_content', 'storm_archive_get_sidebar', 20 );
    function storm_archive_get_sidebar() {
    	if( is_shop() || is_product_category() ) {
    		woocommerce_get_sidebar();
    	}
    }
    
    add_action( 'woocommerce_after_main_content', 'storm_archive_output_content_wrapper_end', 30 );
    function storm_archive_output_content_wrapper_end() {
    	if( is_shop() || is_product_category() ) {
    	?>
    		</div><!-- category-content -->
    		<?php
    	}
    }


    2. Переопределение шаблонов. Создаете в своей теме папку woocommerce и в нее из папки с шаблонами из плагина копируете нужные шаблоны, соблюдая вложенность папок. Меняете в разметке то что вам нужно, стараясь не удалять хуки.

    По хорошему второй способ применяется когда первый чем то не подходит
    Ответ написан
    Комментировать
  • Как вывести код html в данном php коде?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Переопределять шаблон вывода кнопки или через псевдоэлемент вставить бекграундом. Фильтрами лично у меня не вышло и гугл не помог
    Ответ написан
  • Как в woocommerce создать собственный сайдбар?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    // отключение сайдбара
    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    
    add_action( 'woocommerce_sidebar', 'standart_sidebar', 10 );
    function standart_sidebar() {
      get_template_part( 'sidebar' );
      //get_sidebar();
    }

    оба варианта работают
    Ответ написан
  • Как использовать WooCommerce со своей темой?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Вукомерс создает стандартные страницы, для которых используется шаблон page.php (да и собственно даже на шаблоне index.php должно работать, если нет нужных шаблонов) и вставляет туда шорткоды вывода информации, например на странице My Account должен быть шорткод [woocommerce_my_account]. Все должно работать без всяких переносов темплейтов из плагина. Вы чтото не так делаете
    Ответ написан
    8 комментариев
  • Как разделить подкатегории и товары в Woocomerce?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    // Move WooCommerce subcategory list items into heir own <ul> separate from the product <ul>
    add_action( 'init', 'move_subcat_lis' );
    
    function move_subcat_lis() {
    	// Remove the subcat <li>s from the old location.
    	remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
    	add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_start', 40 );
    	add_action( 'woocommerce_before_shop_loop', 'msc_maybe_show_product_subcategories', 50 );
    	add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_end', 60 );
    }
    
    //Conditonally start the product loop with a <ul> contaner if subcats exist.
    function msc_product_loop_start() {
    	$subcategories = woocommerce_maybe_show_product_subcategories();
    	if ( $subcategories ) {
    		echo '<ul class="archive-category-wrapper">';
    	}
    }
    
    //Print the subcat <li>s in our new location.
    function msc_maybe_show_product_subcategories() {
    	echo woocommerce_maybe_show_product_subcategories();
    }
    
    //Conditonally end the product loop with a </ul> if subcats exist.
    function msc_product_loop_end() {
    	$subcategories = woocommerce_maybe_show_product_subcategories();
    	if ( $subcategories ) {
    		echo '</ul>';
    	}
    }
    Ответ написан
    2 комментария
  • Как вывести поле ACF под заголовком категории?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Вот рабочий код

    function add_custom_field_subcat( $category ) {
    
    	$value = get_field('category_description', 'product_cat_'. $category->term_id);
    
    	echo $value; 
    
    }
    add_action( 'woocommerce_before_subcategory_title', 'add_custom_field_subcat', 15 );
    Ответ написан
  • Как переопределить определенные классы в html тегах в Woocommerce на свои и добавить свои html теги для элементов магазина?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Посадка своей верстки на woocommerce состоит как бы из двух основных действий.
    1. С помощью хуков и фильтров изменять разметку итд.
    2. Переопределение шаблона. Для этого у себя в теме создаете папку woocommerce и копируете в нее необходимые шаблоны из папки плагина с шаблонами. И меняете верстку уже там
    Первый способ предпочтительнее, но не всегда с помощью его можно решить все.
    Вот пример кода где создаются дополнительные обертки и переносятся кое-какие элементы
    Посмотреть внутри

    // отключение сайдбара
    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    
    // отключить хлебные крошки
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
    
    // добавить основной контейнер
    remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
    add_action( 'woocommerce_before_main_content', 'storm_output_content_wrapper_start', 10 );
    function storm_output_content_wrapper_start() {
    	?>
    	<div class="container-1000">
    	<?php
    }
    
    // закрыть основной контейнер
    remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
    add_action( 'woocommerce_after_main_content', 'storm_output_content_wrapper_end', 40 );
    function storm_output_content_wrapper_end() {
    	?>
    	</div><!-- container-1000 -->
    	<?php
    }
    
    add_action( 'woocommerce_before_main_content', 'storm_archive_output_content_wrapper_start', 15 );
    function storm_archive_output_content_wrapper_start() {
    	if( is_shop() || is_product_category() ) {
    		?>
    		<div class="category-content">
    		<?php
    	}
    }
    
    add_action( 'woocommerce_before_main_content', 'storm_catalog_wrapper_start', 20 );
    function storm_catalog_wrapper_start() {
    	if( is_shop() || is_product_category() ) {
    		?>
    		<div class="catalog-list-wrapper">
    		<?php
    	}
    }
    
    //вывод хлебных крошек на странице архива
    add_action( 'woocommerce_before_main_content', 'storm_catalog_breadcrumbs', 25 );
    function storm_catalog_breadcrumbs() {
    	if( is_shop() || is_product_category() ) {
    		?>
    		<div class="breadcrumbs">
    			<?php woocommerce_breadcrumb() ?>
    		</div>
    		<?php
    	}
    }
    
    // вывод сортировки и кнопки переключателя фильтра
    remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
    add_action('woocommerce_before_shop_loop', 'storm_catalog_ordering', 30);
    function storm_catalog_ordering() {
    	?>
    	<div class="catalog-sorting-wrapper">
    
    		<button type="button" class="fixed-toggle filter-toggle" id="filter-toggle"><i class="fa fa-filter"></i><?php _e('Filter','storm-store') ?></button>
    
    		<div class="product-sorting">
    			<span class="product-sorting-label"><?php _e('Сортировать:','storm-store') ?></span>
    			<div class="select-wrapper">
    				<?php woocommerce_catalog_ordering() ?>
    			</div>
    		</div>
    	</div>
    	<?php
    }
    
    // Изменить стрелки пагинации
    add_filter( 'woocommerce_pagination_args', 'custom_woo_pagination' );
    function custom_woo_pagination( $args ) {
    	$args['prev_text'] = '<span class="fa fa-angle-left"></span><span class="sr-only">Previous page</span>'; 
    	$args['next_text'] = '<span class="fa fa-angle-right"></span><span class="sr-only">Next page</span>';
    	return $args;
    }
    
    // вывод пагинации
    remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
    add_action('woocommerce_after_shop_loop', 'storm_pagination', 10);
    function storm_pagination() {
    	?>
    	<div class="pagination-wrapper">
    		<?php woocommerce_pagination(); ?>
    	</div>
    	<?php
    }
    
    add_action( 'woocommerce_after_main_content', 'storm_catalog_wrapper_end', 15 );
    function storm_catalog_wrapper_end() {
    	if( is_shop() || is_product_category() ) {
    	?>
    		</div> <!-- catalog-list-wrapper  -->
    		<?php
    	}
    }
    
    add_action( 'woocommerce_after_main_content', 'storm_archive_output_content_wrapper_end', 30 );
    function storm_archive_output_content_wrapper_end() {
    	if( is_shop() || is_product_category() ) {
    	?>
    		</div><!-- category-content -->
    		<?php
    	}
    }

    Ответ написан
    Комментировать
  • Как реализовать расширенный поиск в woocommerce?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Фильтр по атрибутам. Например product filter for woocomnmerce от XforWoocommerce
    Он платный, но ни один бесплатный фильтр не сравнится, я перепробовал много
    Ответ написан
    3 комментария
  • Как из H1 убрать подстановку слова например: категория?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    // Удаляет "Рубрика: ", "Метка: " и т.д. из заголовка архива
    add_filter( 'get_the_archive_title', function( $title ){
    	return preg_replace('~^[^:]+: ~', '', $title );
    });

    а в тайтле смотрите в сторону SEO плагина, Yoast seo по умолчанию такое добавляет
    Ответ написан
  • Как в woocommerce удалить не нужные html-тэги?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Теги менять необязательно, пускай себе будет список, это ни на что не влияет.
    Чтобы добавить свой класс к обертке можно использовать подобный хук:
    // Добавить класс к обертке с товарами
    add_filter('woocommerce_product_loop_start', 'mytheme_product_loop_start');
    function mytheme_product_loop_start() {
    	?>
    	<ul class="card-group products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">
    	<?php
    }


    А класс к товару проще всего добавить дописав в шаблоне content-product.php, который вы предварительно скопировали себе в тему в папку woocommerce. Как на картинке
    5efcbe459b020776214239.png
    Ответ написан
  • Как изменить место вывода вариаций товара в карточке товара woocommerce?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Вариации относятся к функции woocommerce_template_single_add_to_cart, которая повешена на хук woocommerce_single_product_summary. И собственно лежат внутри одной формы с кнопкой добавить в корзину.
    Навряд ли вы их отделите от кнопки добавить в корзину, разве что перенести вместе с кнопокй.
    Ответ написан
    4 комментария
  • Как правильно кастомизировать страницу Checkout - Оформление заказа?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    В woocommerce за checkout отвечает целая одноименная папка, которую можно скопировать в свою тему в папку woocommerce и заняться переопределением необходимых шаблонов. К сожалению, хуков, с которыми можно поработать там не очень много, поэтому либо переопределение шаблонов с последующим оформлением стилями, если есть уже новая верстка со стилями, то меняем разметку в шаблонах так, чтобы соответствовало верстке, или, если получится, просто стилями переоформляем стандартный вывод страницы чекаут
    Ответ написан
    Комментировать
  • Как изменить внешний вид карточки товара Woocommerce?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    За вывод карточки товара отвечает шаблон woocommerce content-product.php
    Его можно переопределить в своей теме, положив в папку woocommerce в корне темы.
    Для того, чтобы вывести в шаблоне дополнительные поля, например артикул, можно воспользоваться хуками из шаблона и на нужный хук повесить вывод артикула, что является более корректным решением, чем изменение разметки шаблона. А можно изменить разметку и прямо в разметке вывести нужные поля. Собственно, конкретный шаблон весь построен на хуках, так что оптимально использовать хуки

    например, я хочу вывести категории, к которым относится товар в карточке перед заголовком
    // Вывод категории в карточках товара
    add_action( 'woocommerce_before_shop_loop_item_title', 'storm_show_product_cat', 30 );
    function storm_show_product_cat() {
    	global $product;
    		echo wc_get_product_category_list( $product->get_id(), ', ', '<div class="product-cat">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</div>' ); 
    }
    Ответ написан
    1 комментарий
  • Как обернуть картинки карточки товаров в ссылку на этот товар?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    У вас тема и в ней придется скорее всего поковыряться, чтобы найти нужные функции.

    На скриншоте явно что-то не то
    5ef8d628e37ce884941428.png

    стандартно в woocommerce открывающий тег ссылки висит на хуке
    do_action( 'woocommerce_before_shop_loop_item' );
    на 10м приоритете и выводится функцией
    woocommerce_template_loop_product_link_open()
    код этой функции
    if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {
    	/**
    	 * Insert the opening anchor tag for products in the loop.
    	 */
    	function woocommerce_template_loop_product_link_open() {
    		global $product;
    
    		$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
    
    		echo '<a href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
    	}
    }

    замена открывающего тега в стандартном woocommerce могла бы выглядеть как-то так:
    remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
    add_action( 'woocommerce_before_shop_loop_item', 'custom_open_link', 10 );
    function custom_open_link() {
    	?>
    		<a href="<?php the_permalink() ?>">
    	<?php
    }
    Ответ написан
  • Как создать разный шаблон категорий в дочерней теме Storefront?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Не до конца конечно понятно, как на макете, я вижу описание, две кнопки, а слева то ли табы, то ли ссылки на категории, то ли это кусок сайдбара...

    В Вукомерс по умолчанию для категории можно задавать изображение и описание
    5ede46f9b631f159911015.png
    Вывод описания по умолчанию как раз над товарами, чтобы вывести картинку можно воспользоваться хуком из официальной документации
    /**
     * Display category image on category archive
     */
    add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
    function woocommerce_category_image() {
        if ( is_product_category() ){
    	    global $wp_query;
    	    $cat = $wp_query->get_queried_object();
    	    $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
    	    $image = wp_get_attachment_url( $thumbnail_id );
    	    if ( $image ) {
    		    echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
    		}
    	}
    }

    У меня изображение выведено подобным образом, но в шаблоне
    5ede476d83926214838447.png

    Вывод кнопок можно повесить на тот же хук, на котором выводится описание, я примеры кода беру у себя, под вас не переделываю
    // Вывод кнопки ВЕРНУТЬСЯ В КАТАЛОГ на странице товара
    add_action( 'woocommerce_before_main_content', 'storm_add_back_to_btn', 25 );
    function storm_add_back_to_btn() {
    	if( is_product() ) {
    		?>
    		<div class="back-to-catalog">
    			<a href="<?php echo wc_get_page_permalink( 'shop' ); ?>" class="back-to-btn"><i class="fa fa-long-arrow-left"></i><?php _e('Back to catalog', 'storm-store') ?></a>
    		</div>
    		<?php
    	}
    }
    Ответ написан
    2 комментария