woocommerce adding column

[matthewokoh]

Hi

How can I increase the column on woocommerce single product page to 4 or 5 columns?

Any help would be great. Thank you in advance.

[Radu]

Hi,

Three it’s the maximum default columns that you can have in a page like woocommerce pages generated dynamically.

The files that handles that are, and you can edit them as you need :

wp-content/themes/kleo/woocommerce/content-single-product.php
wp-content/themes/kleo/woocommerce/ Here are more files related to the product single page, if you will need to change to the modal you will have to edit this : wp-content/themes/kleo/woocommerce/content-single-product-modal.php

They will be overwrited in child theme keeping the same structure example : wp-content/themes/kleo-child/woocommerce/content-single-product.php and so

Child theme needs to be installed and activated.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[matthewokoh]

Hi thanks for the quick reply… the problem is when I look at the file at does location I don’t see anyway to edit or increase column number…

I see this code and nothing to do with gallery column number increase…
Any help pointing to file that define those function or code to override so I can add more column would be great.

Thank you in advance for all your help.

<?php
/**
* The template for displaying product content in the single-product.php template
*
* This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.0.0
*/

if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly
}

?>

<?php
/**
* woocommerce_before_single_product hook.
*
* @hooked wc_print_notices – 10
*/
do_action( ‘woocommerce_before_single_product’ );

if ( post_password_required() ) {
echo get_the_password_form();
return;
}
?>

” <?php post_class(); ?>>

<?php
/**
* woocommerce_before_single_product_summary hook.
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>

<?php
/**
* woocommerce_single_product_summary hook.
*
* @hooked woocommerce_template_single_title – 5
* @hooked woocommerce_template_single_rating – 10
* @hooked woocommerce_template_single_price – 10
* @hooked woocommerce_template_single_excerpt – 20
* @hooked woocommerce_template_single_add_to_cart – 30
* @hooked woocommerce_template_single_meta – 40
* @hooked woocommerce_template_single_sharing – 50
* @hooked WC_Structured_Data::generate_product_data() – 60
*/
do_action( ‘woocommerce_single_product_summary’ );
?>

<!– .summary –>

<?php
/**
* woocommerce_after_single_product_summary hook.
*
* @hooked woocommerce_output_product_data_tabs – 10
* @hooked woocommerce_upsell_display – 15
* @hooked woocommerce_output_related_products – 20
*/
do_action( ‘woocommerce_after_single_product_summary’ );
?>

<!– #product-<?php the_ID(); ?> –>

<?php do_action( ‘woocommerce_after_single_product’ ); ?>

[Radu]

H,
Check the screenshot

add there where you need before or after the main image

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[matthewokoh]

Hi Radu,
Thank you for your quick reply… I think I did not explain correctly what I needed… I wanted just to increase the product thumbnail column from 3 to 4 on the woocommerce single product page.
See attached image.
Thanks in advance for all your help.
Matthew

[Radu]

Hi,

It’s recommanded to set the same with and height for all images to can have a grid gallery with 4 cols an 4 rows fit.

Go live in customizer then check the screenshot

Try this CSS

COPY CODE

.kleo-woo-gallery.thumbnails .woocommerce-product-gallery__image a {
    width: 24.1% !important;
    padding:0 !important;
    margin:0 !important;
}

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[matthewokoh]

Thank you that worked great.

[Radu]

Great
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts