Вкладки WooCommerce под друг другом
Я ищу способ поместить вкладки WooCommerce и контент друг под другом в блоках. Я добавил изображение с примером. Может кто-нибудь мне помочь?
Решение
вы можете добиться с помощью пользовательских хуков, предоставляемых woocommerce, вы можете следовать ниже ссылка на сайт
Вы можете использовать функцию ниже в вашем functions.php изменить структуру вкладки
/**
* Customize product data tabs
*/
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Custom description callback
return $tabs;
}
function woo_custom_description_tab_content() {
echo '<h2>Custom Description</h2>';
echo '<p>Here\'s a custom description</p>';
}
Другие решения
if ( ! function_exists( 'woocommerce_product_description_tab' ) ) {
/**
* Output the description tab content.
*/
function woocommerce_product_description_tab() {
wc_get_template( 'single-product/tabs/description.php' );
}
}
if ( ! function_exists( 'woocommerce_product_additional_information_tab' ) ) {
/**
* Output the attributes tab content.
*/
function woocommerce_product_additional_information_tab() {
wc_get_template( 'single-product/tabs/additional-information.php' );
}
}
Вот как эти блоки отображаются.
Пожалуйста, скопируйте один продукт / tabs / description.php в вашу активную тему / woocommerce / single-product / tabs / description.php
и один продукт / tabs / Additional-Information.php для вашей активной темы / WooCommerce / один продукт / вкладки / Additional-Information.php
Изменить в соответствии с вашими потребностями
С темой Storefront я просто использую следующий CSS для создания полноразмерных горизонтальных вкладок:
/* TABS ************************* */
.woocommerce-tabs .panel h2:first-of-type {
display: none;
}
@media (min-width:768px) {
.woocommerce-tabs ul.tabs {
width: 100%;
float: none;
margin-right: 1.8823529412%;
}
.woocommerce-tabs .panel {
width: 100%;
float: none;
}
}