Invert Social Share with Product Nav

[alexandru]

Can you please advise how to invert display location haru-social-share__wrap with haru-product-nav in product page please. Thank you in advance.

[admin]

Hi,
Thanks for contacting us and choosing our product!
To change this you need to customize PHP code & CSS. So you should check it yourself follow our tutorial because customize is not in the range of support.
First of all you need to understand how to customize template display by follow this topic:

How to customize WordPress theme using Child theme

In this case you need customize template display of: wp-content/themes/teespace/woocommerce/content-single-product.php
then change the code in summary-content (line 86) to:

<?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 haru_woocommerce_template_single_size_guide - 25
                         * @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
                         */
                        if ( function_exists( 'wcdp_add_product_single_link_customize' ) ) {
                            add_action( 'woocommerce_before_add_to_cart_button', 'wcdp_add_product_single_link_customize' );
                        }

                        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
                        add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 3 );
                        
                        if ( $product_sticky_image == 'sticky' ) {
                            add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 70 );
                        }

                        do_action( 'woocommerce_single_product_summary' );

                        if ( $product_sticky_image == 'sticky' ) {
                            remove_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 70 );
                        }
                    ?>

                    <?php
                        $product_navigation = get_post_meta( get_the_ID(), 'haru_single_product_navigation', true );
                        if ( ( $product_navigation == '' ) || ( $product_navigation == 'default' ) ) {
                            $product_navigation = haru_get_option( 'haru_single_product_navigation', 'hide' );
                        }
                    ?>
                    <?php if ( $product_navigation == 'show' ) : ?>
                        <?php haru_product_nav(); ?>
                    <?php endif ?>

It will become like this:
https://prnt.sc/W9eitS9fopjW
then use this custom CSS code:

.haru-social-share {
   position: absolute;
   top: 0;
   right: 0;
}
.haru-product-nav .product-nav {
   position: relative;
   opacity: 1;
   visibility: visible;
}

Hope this helps!

****
Regards,
HaruTheme

[alexandru]

Thank you so much!
It works without modifying content-single-product.php, only i add this css
[CODE].haru-social-share {
position: absolute;
top: 0;
right: 0;
}
[/CODE]
And i hide Navigation from Theme option.
Everything looks the way I want it.
You have the best support!

Attachments:

You must be logged in to view attached files.

[admin]

Thanks for your feedback!
Please vote 5* for TeeSpace to help us improve it in the future.
Thanks so much!

****
Regards,
HaruTheme

[Author]

Posts