Как переопределить определенные классы в html тегах в Woocommerce на свои и добавить свои html теги для элементов магазина?

Question

[Оливия Самохвалова]

Верстаю сайт на woocommerce, макет сделан на bootstrap 4, в woocommerce используются свои стили и классы, которые мне очень сильно мешают, стили я отключила через

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Помогло. А как теперь задать html тегам в woocommerce свои bootstrap классы ? И как добавить эти же самые теги к любым элементам на сайт ?

Answer 1

[Антон Литвиненко]

Посадка своей верстки на 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
	}
}