• Как переопределить определенные классы в 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
    	}
    }

    Ответ написан
    Комментировать
  • Как сделать, чтобы ссылки в меню складывались друг на друга по середине на мобильной версии на bootstrap?

    @inFureal
    Тут скорее надо сделать, чтобы на мобилке флекс был колонкой, а на десктопе строкой.
    flex-direction: row;
    flex-direction: column;
    Ответ написан
    1 комментарий