Размещение информации о товаре на странице магазина

Я пытаюсь отредактировать свой сайт Woocommerce (локально) и повернуть карточки товаров по горизонтали. Для примера того, что я пытаюсь сделать, ознакомьтесь с макетом фотографии B&H. Я использую платформу Foundation с темой JointsWP starter.

У меня установлены плагины WooCommerce Compare Products PRO и списки пожеланий WooCommerce.

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

То, что я пробовал до сих пор

1. Я пробовал использовать крючки из оригинального контент-продукта:

   • действие do_action('woocommerce_before_shop_loop_item_title');
   • действие do_action('woocommerce_after_shop_loop_item_title');
   • действие do_action ('woocommerce_after_shop_loop_item');

Затем:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

1. Я добавил действия обратно с другими приоритеты.

2. Я попытался переместить столбец div каждого элемента в content-product.php выше и ниже друг друга.

3. Я пробовал копировать/вставлять код из каждого шаблона (add-to-cart.php, rating.php, price.php) вместо ссылки на функцию.

Это работает, если я удаляю список пожеланий, сравниваю и код кнопки корзины.

Вот код из content-product.php :

<li <?php post_class( $classes ); ?>>

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

<div class="row">

    <a href="<?php the_permalink(); ?>">

        <div class="small-12 columns panel">

            <div class="small-3 columns">

                <?php if ( function_exists('woocommerce_template_loop_product_thumbnail' ) ) echo woocommerce_template_loop_product_thumbnail(); ?>

            </div>

            <div class="small-6 columns">

                <h3><small><?php the_title(); ?></small></h3>

                <?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?>

            </div>

            <div class="small-3 columns panel end">

                <?php if ( function_exists('woocommerce_template_loop_price' ) ) echo woocommerce_template_loop_price(); ?>

                <?php if ( function_exists('woocommerce_template_loop_rating' ) ) echo woocommerce_template_loop_rating(); ?>

                <form class="cart" method="post" enctype='multipart/form-data' action="<?php echo add_query_arg( array('add-to-wishlist-itemid' => $product->id), $product->add_to_cart_url() ); ?>">
                    <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
                    <?php $wishlists->add_to_wishlist_button(); ?>
                </form>

                <?php if ( function_exists('woo_add_compare_button' ) ) echo woo_add_compare_button(); ?>

                <?php if ( function_exists('woocommerce_template_loop_add_to_cart' ) ) echo woocommerce_template_loop_add_to_cart(); ?>

            </div>
        </div>
    </a>

</div>

Я забыл чтобы упомянуть, что я также удалил стили Woocommerce со следующим кодом:

add_filter( 'woocommerce_enqueue_styles', 'wc_dequeue_styles' );
function wc_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] );        // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] );         // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
return $enqueue_styles;
}