Trying to move the product tabs from their current position, to underneath the product images. Should be a theme template I can edit, however it seems impossible with the way you guys coded things. I’ve tried for hours getting this to work to no avail. WooCommerce product pages on your theme by default just have the product image and gallery on the left. Would be great to use the real estate BELOW the gallery and images to add more content.
Hello There,
Thanks for writing in!
Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Move Product tabs underneath the product images
// =============================================================================
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_product_thumbnails', 'woocommerce_output_product_data_tabs', 10 );
// =============================================================================
After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.
Please let us know how it goes.
Thank you for the reply. A child theme was created, your suggested code was added to functions.php. Did not work. All this did was remove the tabs. Did not move them to the requested area.
Hi there,
I checked your website and I see that you use the Renew stack. The fact is that the tabs are in a correct position and there is a customization on your part that made that big gap you are talking about. Please check the link below:
Now see the screenshot below:
The section that I highlighted is the product meta section which in normal settings contains category and some additional information which sits ok.
Now in your case you did a customization and changed that and made it a long section which causes the gap:
You need to change your customization and add a separate section before the Tab to add the custom section so that it will be possible to use the CSS code to change the view. At the moment the section you added is under the product meta section which itself is also in the main description section which it is not possible to achieve the effect you want.
Also please consider that if you add the tab in the place you have mentioned will cause problems when it comes to the smaller screens and you need to add more custom CSS code to fix the issue on those screens.
Thank you.
That doesn’t work. I’m not interested in shortening anything on the right side of the product page. The “customization” you are referring to is no customization at all. It’ a standard WooCommerce Product Add-On section and there is no other place that Product Add-Ons can go besides just before the Add To Cart button so that the total populates and so forth.
Please refer to the screenshot I provided in the original post for my desired results. Not worried about any responsive CSS, that’s simple stuff. Thank you!
Hi,
I tried the code provided by my colleague and it seems to work on my end.
// Move Product tabs underneath the product images
// =============================================================================
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_product_thumbnails', 'woocommerce_output_product_data_tabs', 10 );
// =============================================================================
It moved the tabs below the thumbnail.
Would you mind providing us with login credentials so we can take a closer look? Please provide following information:
Set it as Secure Note
All the best!
the code provided hides the tabs rather than moving them.
Hello There,
Thanks for providing the information. I have logged in and managed to resolve your issue. I have done these steps:
1. I went to X > Validation > Theme Options Manager and downloaded the XCS file.
2. I switched to the parent X Theme.
3. I deleted your X Child theme.
4. In my testing server, I downloaded a fresh X Child theme and then made the following modifications.
// Remove Product tabs underneath the product images
// =============================================================================
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
// =============================================================================
// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 );
function remove_woo_three_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================
product-image.php in “x-child/woocommerce/single-product/” and use this code in the file<?php
/**
* Single Product Image
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.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.3.2
*/
defined( 'ABSPATH' ) || exit;
// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;
}
global $product;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . ( has_post_thumbnail() ? 'with-images' : 'without-images' ),
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( has_post_thumbnail() ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
<?php woocommerce_output_product_data_tabs(); ?>
</div>
5. I zip the child theme and uploaded back in your site.
6. I then re activated the newly activated Child theme.
7. To make sure that I have the same settings as before, I have imported the XCS file (which I downloaded in #1) in Theme Options Manager.
This is how it looks now:
Please check your product page now.
That got everything in the right place, but for some reason the fonts are all different now and I’m unable to straighten this out via the Customizer? See this URL for font reference:
NOT to be confused with trop2, which is a second installation so I can show the client a before and after. Thank you so much!
Hi,
To make it the same as the font in trop2, you can add the code below in Theme Options > CSS
.white-bg-column .h-custom-headline a {
font-style: italic;
font-family: 'Times New Roman';
}
.home-quote {
font-family: 'Times New Roman' !important;
}
Hope that helps.
You got my request backwards. The fonts on /trop are how they should look on /trop2. Ever since you went in and did your thing, the fonts changed and I cannot seem to get them to change back in trop2. There should be no Times New Roman anywhere…
Hi glissonryan,
Getting the fonts in italic after importing the theme settings, is labeled as a bug at our issues tracker and it will be fixed in the next version, unfortuantely, I don’thave an ETA for this update yet, however, adding this CSS snippet to (X > Theme Options > CSS) should work as a a workaround:
body {
font-style: normal !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-style: normal !important;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
font-style: normal !important;
}
Thanks.
Unfortunately, this doesn’t work. So we resolved the first issue…now comes a second with the fonts haha.
Hi,
The code is working, fonts aren’t italic anymore here: https://ryanglisson.com/trop2/
You just need to recreate your fonts in the Font Manager, then reassign the fonts back in (X > Theme Options > Typography), I have already added QuickSand font in the font manager under the name “test”, then I assigned “test” as the font for the body in Typography settings, you can see now the fonts are quite similar between both sites.
Please check this guide:
Thanks.
I don’t understand what you mean…? I tried creating a font in the font manager for headings, Oswald is the font I’m trying to use. I still cannot get my headings and fonts in trop2 to look like that of trop.
What I want is a body font of QuickSand and headers all to be Oswald unless I have changed them via CSS. Why is this suddenly so buggy?
Anyways thank you very much for your assistance!
Ryan
Hi Ryan,
I checked under Theme Options > Typography and can see that your headings font was set with your body font.
I went ahead and change it to be your Headings Font.
See screenshot below.
Kindly check in your end.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.