CartFlows issue

[Cris_W]

Hi! I would like to use cartflows at the checkout of my store, but after activating and configuring it, the WPC Product Options plugin section does not display correctly, could you help me? I want it to look like the default one. I attach screenshots.

Thank you!

Attachments:

You must be logged in to view attached files.

[admin]

Hi,
Thanks for contacting us and choosing our product!
Currently we installed extra plugin WPC Price by Options plugin and it’s working fine without any issues.
If CartFlows causes break layout, the best solution is contact plugin author about it.
However we don’t see it on your site now. Please active this plugin then we’ll check it for you.
We’ll try CSS solution if it can resolve the issue.

****
Regards,
HaruTheme

[Cris_W]

Hi,
thank you for you answer. In both screenshots the WPC Product Options plugin is activated. The first screenshot is the one that comes by default on your checkout page. In the second screenshot, the WPC Product Options plugin and also the CartFlows plugin are activated, but the information appears out of order to the right of the product, I want the WPC options information to be displayed below the product title as in the first screenshot of screen.

Thank you!

[Cris_W]

Hi! Any news regarding this?

Also, I have another question. How can I edit single product page with Elementor Pro? I need to add more information below the description section. Thank you!

[admin]

Hi,
1. We have just checked checkout page and all CSS come from CartFlow plugin.
The best solution please contact plugin author to check it for you.
In our case we can provide this CSS code:

.wcf-embed-checkout-form table.shop_table tbody tr.cart_item td.product-name {
  display: block;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table td dl dt {
  padding-left: 0;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table td dl dd {
  padding-top: 0;
}

The result: https://prnt.sc/uptZK3f4yxT8
If you need other solution please contact plugin author.

2. You can create single product template with Elementor by follow this:
https://elementor.com/help/woocommerce-single-product-builder/
Please note it will use style from Elementor (not from our theme)
Hope this helps!

****
Regards,
HaruTheme

[Cris_W]

Hi, thank you for your response, unfortunately the CSS code provided does not work correctly. I will contact cartflows support.

Regarding the second question, is it possible to keep the style of your single product page and add information below the description? I need to add a Haru steps section and another FAQ section.

Thank you!

[Cris_W]

I have another problem, when the Elementor Pro plugin is activated the mini cart breaks, I attach a screenshot, but when I deactivate it everything returns to normal. I have tried to apply what they see in the guide “You can fix it by go to Elementor -> Tools then Regenerate CSS & Data & Sync Library” but it doesn’t solve it.

Attachments:

You must be logged in to view attached files.

[admin]

Hi,
In the settings of Elementor Integration:
yoursitedomain/wp-admin/admin.php?page=elementor#tab-integrations
Please disable Mini Cart template from Elementor:
https://prnt.sc/B80iAo-4LwC_
It causes layout breaks.
You may need to clear the session or use incognito mode to see changes.
Hope this helps!

***
Regards,
HaruTheme

[Cris_W]

Hi! thanks for your reply. It has worked. Can you answer my previous question? Thank you!

Is it possible to keep the style of your single product page and add information below the description? I need to add a Haru steps section and another FAQ section.

Thank you!

[admin]

Hi,
1. If you want to add tab you can use this plugin:

Custom Product Tabs for WooCommerce

2. If you want to changes layout you need to go to: wp-content/themes/teespace/woocommerce/ then open file content-single-product.php
You can add content after line 168:
https://prnt.sc/ykxUN_D8jx88
In your case the easiest solution is follow steps above then:
– Create a Section template in Templates -> Saved Templates: https://prnt.sc/jv0k3jRuPlvS
then you will get a shortcode like this: https://prnt.sc/NY012CS4kFig
– Use PHP code to display it after line 168: https://developer.wordpress.org/reference/functions/do_shortcode/
Example:

<?php echo do_shortcode('thecodeatstepabove'); ?>

You can do it via child theme: https://harutheme.com/forums/topic/customize-wordpress-theme-using-child-theme/
Hope this helps!

****
Regards,
HaruTheme

• This reply was modified 3 weeks ago by admin.

[Cris_W]

Hi! Thank you so much for your help! It has worked perfectly, excellent support!
I have other questions:

1.
I would like that the product part maintains its layout style and the new section that I have added adopts a large layout so that it takes up the entire page. I leave a link to the product so you can see it.

Test taza tamaño

I have tried from the single product layout section but when I change it everything becomes very big.

2.
Is it possible that the first FAQ questions are not activated by default?

3.
I noticed that the option to add to cart does or select options not appear in the sticky cart tab like your demo. I have everything activated according to the manual, both in the theme options tab and individually in the product.I attach a screenshot.

Thank you!

Attachments:

You must be logged in to view attached files.

[admin]

Hi,
1. The layout of single product page from Theme Options -> WooCommerce -> Single Product -> Layout. It will use in wp-content/themes/teespace/woocommerce/single-product.php
So you can set Single Product layout is Fullwidth or Large Container.
Or if you can check the PHP code you can move the code to display additonal section to outside of container:
https://prnt.sc/dqw7ZfKjD4hr
You can do anything to fit what you want via child theme.
2. Please change active index default to 10 (greater than total accordion items):
https://prnt.sc/o4uX4Ealwm5b . It may works.
3. Don’t understand how do you setup product to get this but you can go to Appearance -> Customize -> Additional CSS & add this code:

.single-product-sticky__btn .add_to_cart_inline {
  display: block;
  margin: 0;
}

Hope this helps!

****
Regards,
HaruTheme

[Cris_W]

Hi! thank you very much for your reply.

1.I can’t get it to work, I have tried whith the PHP code, but I can’t get the new section to fill the full width, I appreciate your help but could you be a little more specific? Sorry if this is a newbie question.

2.Works perfect!

3. I have found the Issue. On the product page when I set the product options (plugin) to “global” the fields that I have previously configured for the category appear correct but the button in the bar below (select options) disappears.

but when I change the product option to “override” and configure it again, the button does appear in the bar below.

Is there a way to use the “global” field and not have to go product by product?

[admin]

Hi,
1. In this case the best solution is:
– Go to Theme Options -> WooCommerce -> Single Product Layout and set Fullwidth:
https://prnt.sc/n4s0VIxVxETz.
– Go to and change the code in wp-content/themes/teespace/woocommerce/ then open file content-single-product.php and change the code from line 81 like this:

<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '' . $product_customize, $product ); ?>>
    <div class="haru-container">
        <div class="single-product-top <?php echo esc_attr( $product_single_style . ' ' . $product_sticky_image ); ?>">
            <div class="single-product-image-wrap <?php echo esc_attr( $product_single_style . ' ' . $gallery_thumb_position . ' ' . $product_sticky_image ); ?>">
                <div class="single-product-image-content">
                    <?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' );
                    ?>
                </div>
            </div>
            <?php if ( true == haru_check_wpc_product_options_plugin_status() ) : ?>
            <div class="single-product-summary <?php echo esc_attr( $product_extra_options ); ?>" data-heading="<?php echo esc_html__( 'Extra Product Options', 'teespace' ); ?>">
            <?php else : ?>
            <div class="single-product-summary">
            <?php endif; ?>
                <div class="summary entry-summary">
                    <div class="summary-content">
                        <?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 ?>
                        
                        <?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 );
                            }
                        ?>
                    </div>

                </div><!-- .summary -->
            </div>
        </div>
        <div class="single-product-bottom">
            <?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
                 */
                remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

                if ( $product_sticky_image == 'sticky' ) {
                    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
                }

                do_action( 'woocommerce_after_single_product_summary' );

                if ( $product_sticky_image == 'sticky' ) {
                    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
                }
            ?>
        </div>
    </div>

    <div class="fullwidth">
        <?php echo do_shortcode('thecodeatstepabove'); ?>
    </div>

    <div class="haru-container">
        <?php add_action( 'woocommerce_after_single_product', 'woocommerce_output_related_products', 20 ) ?>
    </div>
</div><!-- #product-<?php the_ID(); ?> -->

<?php do_action( 'woocommerce_after_single_product' ); ?>

You can see more in this screenshot:
https://prnt.sc/6IKy0YoL7v7K
If you want to change to large container layout you need to change:

<div class="haru-container">

to

<div class="haru-container haru-container--large">

3. We’ll check and have a solution later.
Hope this helps!

***
Regards,
HaruTheme

[admin]

3. You can go to Appearance -> Customize -> Additional CSS & add this code:

.single-product-sticky__btn .add_to_cart_inline {
  display: block;
  margin: 0;
}

.single-product-sticky__btn:has(> .product-button) .add_to_cart_inline {
  display: none;
}

We’ll update this in the next version.

****
Regards,
HaruTheme

[Author]

Posts