Вкладки WooCommerce под друг другом

Question

Я ищу способ поместить вкладки WooCommerce и контент друг под другом в блоки.Я добавил изображение с примером.Кто-нибудь может мне помочь?

Answer 1

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' );
    }
}

Вот как эти блоки отображаются.

Пожалуйста, скопируйте файл single-product / tabs / description.php в вашу активную тему / woocommerce / single-product / tabs / description.php

и один продукт / вкладки / Additional-Information.php для вашей активной темы / WooCommerce / один продукт / вкладки / Additional-Information.php

Изменить в соответствии с вашими потребностями

Answer 2

С темой 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;
    }
}

Answer 3

вы можете добиться с помощью пользовательских хуков, предоставляемых 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>';
}