Docs

[Mary Beth M]

Hey X team! I would like to move the woocommerce product title and display the category name to top of product page. I attached a quick mock up as reference. Essentially I just need to make the page titles match the other pages on the site, but not quite sure how to accomplish this since it’s woocommerce(and I assume a little php edit will be involved).

I’m already using a child theme. You’ll notice on the mockup I attached, there are 2 “child” products on each main product, as they’re selling bikinis, so each piece gets their own description and add to cart buttons. The “parent title” is the one I need to move, which I know is this class: .product_title.entry-title

I’ve tried a bunch of different CSS combos trying to remove it from the product summary/description area and moving it the where the .entry-top-navigation used to be, which is why I’m thinking I need a little php to get this finished?

The other thing I’m trying to do is display the product category name above the name of the product, but figured I should start with the more difficult task first in case one change is dependent on the other.

The site is still in maintenance mode, so I’ll add the credentials in a private reply. Thank you guys for any help.

Side note: Just want to say thank you for all your help over the last 3+ years. I’ve used this theme for every client since discovering it back in 2013, which is a lot….a…lot…So thank you. 🙂 Cheers.

[Mary Beth M]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed post information. It looks like that the credentials you have given is not working for us. The username seems invalid. Please provide us the correct details so that we can check your site.

Meanwhile, to add a category name above your title, perhaps you can add this code in your child theme’s functions.php file

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_add_product_cat');
function custom_add_product_cat(){
    global $product;
    $product_cats = wp_get_post_terms($product->id, 'product_cat');
    $count = count($product_cats);
    foreach($product_cats as $key => $cat)
    {
        echo $cat->name;
        if($key < ($count-1))
        {
            echo ', ';
        }
        else
        {
            echo '<br/>';
        }
    }
}

Please let us know how it goes.

[Mary Beth M]

This reply has been marked as private.

[Rue Nel]

Hello There,

You might also try this code:

add_action( 'woocommerce_before_single_product', 'custom_add_product_cat');
function custom_add_product_cat(){
    global $product;
    $product_cats = wp_get_post_terms($product->id, 'product_cat');
    $count = count($product_cats);
    $categories = '';
    foreach($product_cats as $key => $cat){
        $categories .= $cat->name;
        if($key < ($count-1)){
            $categories .= ', ';
        }
    }

    echo '<div class="custom-category-title x-container max width"><h2>' . $categories . '</h2></div>';
}

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[Mary Beth M]

I did not have luck with that, but I’m sure it’s my fault though. Hopefully the credentials I just sent will work, if not I attached my child php file if it helps.
Thank you again.

[Mary Beth M]

<?php

// =============================================================================
// FUNCTIONS.PHP
// —————————————————————————–
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// —————————————————————————–
// 01. Enqueue Parent Stylesheet
// 02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ );

// Additional Functions
// =============================================================================

function wc_remove_all_quantity_fields( $return, $product ) {
return true;
}

// Displaying custom menu icons

add_action(‘x_after_view_global__brand’, ‘add_custom_menu_icons’);
// =============================================================================

function wc_remove_related_products( $args ) {
return array();
}

add_action( ‘wp_ajax_my_action’, ‘get_product_with_vars’ );

function get_product_with_vars() {
global $wpdb,$product, $post;; // this is how you get access to the database

$product = wc_get_product( 456 );
$post = $product->post;
setup_postdata( $post );

remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_upsell_display’, 15 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );

add_filter(‘woocommerce_related_products_args’,’wc_remove_related_products’, 10);

wc_get_template_part( ‘content’, ‘single-product’ );

wp_die(); // this is required to terminate immediately and return a proper response
}

// Product page titles:
// =============================================================================

add_action( ‘woocommerce_after_shop_loop_item_title’, ‘custom_add_product_cat’);
function custom_add_product_cat(){
global $product;
$product_cats = wp_get_post_terms($product->id, ‘product_cat’);
$count = count($product_cats);
foreach($product_cats as $key => $cat)
{
echo $cat->name;
if($key < ($count-1))
{
echo ‘, ‘;
}
else
{
echo ‘<br/>’;
}
}
}

// Social Output
// =============================================================================

if ( ! function_exists( ‘x_social_global’ ) ) :
function x_social_global() {

$instagram = x_get_option( ‘x_social_instagram’, ” );
$facebook = x_get_option( ‘x_social_facebook’, ” );
$pinterest = x_get_option( ‘x_social_pinterest’, ” );
$twitter = x_get_option( ‘x_social_twitter’, ” );
$google_plus = x_get_option( ‘x_social_googleplus’, ” );
$linkedin = x_get_option( ‘x_social_linkedin’, ” );
$xing = x_get_option( ‘x_social_xing’, ” );
$foursquare = x_get_option( ‘x_social_foursquare’, ” );
$youtube = x_get_option( ‘x_social_youtube’, ” );
$vimeo = x_get_option( ‘x_social_vimeo’, ” );
$dribbble = x_get_option( ‘x_social_dribbble’, ” );
$flickr = x_get_option( ‘x_social_flickr’, ” );
$behance = x_get_option( ‘x_social_behance’, ” );
$tumblr = x_get_option( ‘x_social_tumblr’, ” );
$rss = x_get_option( ‘x_social_rss’, ” );

$output = ‘<div class=”x-social-global”>’;

if ( $instagram ) : $output .= ‘<i class=”x-icon-instagram”></i>‘; endif;
if ( $facebook ) : $output .= ‘<i class=”x-icon-facebook-square”></i>‘; endif;
if ( $pinterest ) : $output .= ‘<i class=”x-icon-pinterest-square”></i>‘; endif;
if ( $linkedin ) : $output .= ‘<i class=”x-icon-linkedin-square”></i>‘; endif;
if ( $twitter ) : $output .= ‘<i class=”x-icon-twitter-square”></i>‘; endif;
if ( $google_plus ) : $output .= ‘<i class=”x-icon-google-plus-square”></i>‘; endif;
if ( $xing ) : $output .= ‘<i class=”x-icon-xing-square”></i>‘; endif;
if ( $foursquare ) : $output .= ‘<i class=”x-icon-foursquare”></i>‘; endif;
if ( $youtube ) : $output .= ‘<i class=”x-icon-youtube-square”></i>‘; endif;
if ( $vimeo ) : $output .= ‘<i class=”x-icon-vimeo-square”></i>‘; endif;
if ( $dribbble ) : $output .= ‘<i class=”x-icon-dribbble”></i>‘; endif;
if ( $flickr ) : $output .= ‘<i class=”x-icon-flickr”></i>‘; endif;
if ( $behance ) : $output .= ‘<i class=”x-icon-behance-square”></i>‘; endif;
if ( $tumblr ) : $output .= ‘<i class=”x-icon-tumblr-square”></i>‘; endif;
if ( $rss ) : $output .= ‘<i class=”x-icon-rss-square”></i>‘; endif;

$output .= ‘</div>’;

echo $output;

}
endif;

[Rue Nel]

Hello There,

Please check my latest reply.

Hope that helps.

[Author]

Posts