Блог

У меня возникли проблемы с корректным отображением страницы моего продукта.

Я надеюсь попытаться получить такой результат на странице моего продукта. (Описание и атрибуты горизонтально на той же вкладке)

Как вы можете видеть на картинке, описание находится слева, а атрибуты отображаются справа.

На моем сайте я в настоящее время удалил вкладку атрибутов и вложил ее под описание, используя этот код в моем functions.php :

 add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98 );
function exetera_custom_product_tabs( $tabs ) {
        
    // Custom description callback.
    $tabs['description']['callback'] = function() {
        global $post, $product;


        // Display the content of the Description tab.
        the_content();


        // Display the heading and content of the Additional Information tab.

        echo '<h2>Specifications</h2>';

        do_action( 'woocommerce_product_additional_information', $product );
    };

    // Remove the additional information tab.
    unset( $tabs['additional_information'] );

    return $tabs;
}
  

Просто не могу понять, как заставить его располагаться горизонтально рядом друг с другом.

Любая помощь будет с благодарностью принята, заранее спасибо!

Вы должны обернуть содержимое вкладок в divs, а затем выровнять / оформить их с помощью CSS. Однако это зависит от темы, поэтому мой ответ сводится к абсолютным основам.

 add_filter( 'woocommerce_product_tabs', 'exetera_custom_product_tabs', 98, 1 );
function exetera_custom_product_tabs( $tabs ) { 
    // Custom description callback.
    $tabs['description']['callback'] = function() {
        global $post, $product;

        echo '<div class="description left" style="float:left;width:49%;">';

        // Display the content of the Description tab.
        the_content();
        
        echo '</div>';

        // Display the heading and content of the Additional Information tab.

        echo '<div class="specifications right" style="float:right;width:49%;">';

        echo '<h2>Specifications</h2>';

        do_action( 'woocommerce_product_additional_information', $product );
        
        echo '</div>';
    };

    // Remove the additional information tab.
    unset( $tabs['additional_information'] );

    return $tabs;
}