Chào các bạn. Mình thấy Theme MaxShop là một theme bán hàng rất đẹp và có rất nhiều bạn dùng. Thấy nhiều bạn xài hàng Null không được cập nhật phiên bản mới nêu gây lỗi sản phẩm chỉ hiện thị 2 cột trên một hàng. Thấy nhiều bạn hỏi quá nên mình viết bài này hướng dẫn các bạn fix như sau nhé.

Đầu tiên các bạn thay toàn bộ code file content-product.php
trong theme của bạn bằng code bên dưới:
<?php /** * The template for displaying product content within loops. * * Override this template by copying it to yourtheme/woocommerce/content-product.php * * @author WooThemes * @package WooCommerce/Templates * @version 2.6 */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } global $product, $woocommerce_loop; if ( empty( $woocommerce_loop['loop'] ) ) { $woocommerce_loop['loop'] = 0; } $col_lg = ya_options()->getCpanelValue('product_col_large'); $col_md = ya_options()->getCpanelValue('product_col_medium'); $col_sm = ya_options()->getCpanelValue('product_col_sm'); $column1 = 12 / $col_md; $column2 = 12 / $col_sm; $class_col = ""; $col_large = 0; // Store column count for displaying the grid if ( empty( $woocommerce_loop['columns'] ) ) { $col_large = 12 / $col_lg; }else{ $col_large = 12 / $woocommerce_loop['columns']; } // Ensure visibility if ( ! $product || ! $product->is_visible() ) { return; } // Increase loop count $class_col .= ' col-lg-'.$col_large.' col-md-'.$column1.' col-sm-'.$column2.' clearfix'; if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $col_lg || 1 == $col_lg ) { $class_col .= ' clear_lg'; } if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $col_md || 1 == $col_md ) { $class_col .= ' clear_md'; } if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $col_sm || 1 == $col_sm ) { $class_col .= ' clear_sm'; } ?> <li <?php post_class($class_col); ?>> <div class="products-entry clearfix"> <?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <div class="products-thumb"> <?php /** * woocommerce_before_shop_loop_item_title hook * * @hooked woocommerce_show_product_loop_sale_flash - 10 * @hooked woocommerce_template_loop_product_thumbnail - 10 */ do_action( 'woocommerce_before_shop_loop_item_title' ); ?> <?php $nonce = wp_create_nonce("ya_quickviewproduct_nonce"); $link = admin_url('admin-ajax.php?ajax=true&action=ya_quickviewproduct&post_id='.$product->id.'&nonce='.$nonce); $linkcontent ='<a href="'. $link .'" data-fancybox-type="ajax" class="fancybox fancybox.ajax sm_quickview_handler-list" title="Quick View Product">'.apply_filters( 'out_of_stock_add_to_cart_text', __( 'Quick View', 'yatheme' ) ).'</a>'; echo $linkcontent; ?> </div> <div class="products-content"> <?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?> <h4><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a></h4> <?php if ( $price_html = $product->get_price_html() ){?> <div class="item-price"> <span> <?php echo $price_html; ?> </span> </div> <?php } ?> <div class="desc std"> <?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?> </div> <div class="item-bottom clearfix"> <?php do_action( 'woocommerce_after_shop_loop_item' ); ?> <?php $nonce = wp_create_nonce("ya_quickviewproduct_nonce"); $link = admin_url('admin-ajax.php?ajax=true&action=ya_quickviewproduct&post_id='.$product->id.'&nonce='.$nonce); $linkcontent ='<a href="'. $link .'" data-fancybox-type="ajax" class="fancybox fancybox.ajax sm_quickview_handler" title="Quick View Product">'.apply_filters( 'out_of_stock_add_to_cart_text', __( 'Quick View', 'yatheme' ) ).'</a>'; echo $linkcontent; ?> </div> <?php /** * woocommerce_after_shop_loop_item_title hook * * @hooked woocommerce_template_loop_price - 10 */ ?> </div> </div> </li>
Tiếp là bạn thay toàn bộ code trong file content-product_cat.php
bằng code bên dưới
<?php /** * The template for displaying product category thumbnails within loops. * * Override this template by copying it to yourtheme/woocommerce/content-product_cat.php * * @author WooThemes * @package WooCommerce/Templates * @version 2.6 */ if ( ! defined( 'ABSPATH' ) ) { exit; } global $woocommerce_loop; // Store loop count we're currently on if ( empty( $woocommerce_loop['loop'] ) ) { $woocommerce_loop['loop'] = 0; } // Store column count for displaying the grid if ( empty( $woocommerce_loop['columns'] )) // Increase loop count $woocommerce_loop['loop'] ++; ?> <li class="product-category product<?php if ( ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] == 0 || $woocommerce_loop['columns'] == 1 ) echo ' first'; if ( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] == 0 ) echo ' last'; ?>"> <?php do_action( 'woocommerce_before_subcategory', $category ); ?> <?php /** * woocommerce_before_subcategory_title hook * * @hooked woocommerce_subcategory_thumbnail - 10 */ do_action( 'woocommerce_before_subcategory_title', $category ); ?> <div class="product-thumb"> <a href="<?php echo get_term_link( $category->slug, 'product_cat' ); ?>" class="category-link"> <?php echo woocommerce_subcategory_thumbnail( $category ); ?> </a> </div> <h3 class="h5"> <a href="<?php echo get_term_link( $category->slug, 'product_cat' ); ?>"> <?php echo $category->name; if ( $category->count > 0 ) echo apply_filters( 'woocommerce_subcategory_count_html', ' <mark class="count">' . $category->count . '</mark>', $category ); ?> </a> </h3> <?php /** * woocommerce_after_subcategory_title hook */ do_action( 'woocommerce_after_subcategory_title', $category ); ?> <?php do_action( 'woocommerce_after_subcategory', $category ); ?> </li>
Bước cuối cùng các bạn vào file css/app-default.css
tìm vào xóa đi đoạn css sau:
.clear_lg { clear: both; }
Done. Chúc các bạn thành công!
add cho em hỏi khi em làm theo đúng 3 bước trên thì sản phẩm có dòng thì 4 sản phẩm có dòng chỉ 1 sản phẩm và bị nhảy cách có dòng lại 2 sản phẩm, add xem giúp mình với ạ, mình cảm ơn
AD giúp mình với mình có trang webshop mới làm mà nó bị như này, bạn xem có cách nào để fix lỗi ko, trang sản phẩm của mình đây: https://tashinvietnam.com/cua-hang/
Bạn đang dùng theme gì vậy nhỉ?
Mình dùng theme Harveststore của Templatemela mình làm theo hướng dẫn cài đặt của nó nhưng mà bị như này, không hiểu còn thiếu những gì hay cần phải tùy biến lại trang shop của nó nữa
Có cách nào không dùng woocommerce không admin ? Website mình nhiều sản phẩm dùng woocommerce nặng quá load hơn 5s chán kinh
Nếu bạn dùng wp mà muốn bán hàng thì bắt buộc phải dùng woo nhé. Muốn nhẹ nhàng thì dùng theme Flatsome ý.