Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3302004
Styling the WPC-FBT layout
Closed

Comments

  •  1
    Lukas started the conversation
    March 14, 2023 at 9:47am

    Hello WPC support


    I'm about to test your Frequently Bought Together plugin. I like it a lot, but I have two questions about it before I go for the premium version.

    1. Image-size: I would like to get the layout as close as possible to Amazon's FBT. In the first step I would like to enlarge the pictures a bit. However, I can't manage to scale the images from the standard dimensions of 80x80px to 150x150px with my own CSS. Unfortunately, when using the following CSS, you can only change the height and not the width of the images.

    .woobt-images .woobt-image img {
       width: 150px !Important;
       height: 150px !Important;
    }

    What am I doing wrong?


    2. Surcharge: I do not want the value "surcharge" to be indicated below. I would much rather have the cumulative total discount displayed there.

    How can I implement this?


    Thank you for your help and reply.

    Best regards
    Luke

  •  767
    Janilyn replied
    March 15, 2023 at 2:03pm

    Hi Lukas,

    Thank you for contacting WPClever Support Forum. 

    We’ve received your ticket and assigned one of our developers to help you with that. 

    He’ll be looking into your questions and responding with specific instructions as soon as possible. 

    Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  1,222
    Dustin replied
    March 15, 2023 at 6:43pm

    Hi Lukas,

    #1. To change the image size, please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .woobt-images .woobt-image {
    width: 150px;
    flex: 0 0 150px;
}
.woobt-images .woobt-image.woobt-image-this {
    width: 130px;
    flex: 0 0 130px;
}
.woobt-images .woobt-image img {
    width: 100%;
    height: auto;
}

    #2. To hide "surcharge",  please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .woobt-additional {
    display: none !important;
}

    Best regards,
    Dustin

  •  1
    Lukas replied
    March 16, 2023 at 10:22am

    Hi Dustin


    Thank you for your CSS. It works perfectly.

    I have one more question: Is it possible to display above the total price how much the customer saves in total if he buys the products together?

    Many thanks and best regards
    Luke


  •  1,222
    Dustin replied
    March 17, 2023 at 4:19am

    Please add the below custom code (How to add custom code?)

    add_action( 'wp_footer', function () {
    ?>
    <script type="text/javascript">
      (function($) {
        $(document).on('woobt_calc_price', function(e, total, total_ori, total_ori_regular) {
          if (total_ori < total_ori_regular) {
            $('<span class="woobt-total-saved" style="color: green"> - Saved $' + (total_ori_regular - total_ori) +
                '</span>').
                appendTo('.woobt-total');
          }
        });
      })(jQuery);
    </script>
    <?php
}, 99 );

    And the result https://www.screencast.com/t/bTXrFSprtjw

    Best regards,
    Dustin

  •  1
    Lukas replied
    March 29, 2023 at 8:26am

    Hey Dustin

    Thank you very much.

    You are my hero.

    Best regards
    Lukas

  •  1,222
    Dustin replied
    March 29, 2023 at 5:25pm

    You're welcome!smile.png

    If you are satisfied with our plugin and support, please reward it with a full five-star ★★★★★ rating. https://wordpress.org/support/plugin/woo-bought-together/reviews/?filter=5 
    Thank you in advance! ♥

    Best regards,
    Dustin

  •  1
    Lukas replied
    March 31, 2023 at 2:07pm

    Hi Dustin

    Yes, of course, I just wrote a 5-star review. I was very happy to do that.

    I have an additional question about the code snippet you posted:

    1. Is the code executed twice for me because I "Saved" is displayed twice. See the screenshot.

    2. The savings are displayed with 14 decimal places. Would it be possible to limit this to two decimal places? And if possible, round to the nearest ten.

    Thanks a lot for your help.

    Best regards
    Lukas

    Attached files:  WPC SUpport pic.png

  •  1,222
    Dustin replied
    March 31, 2023 at 3:38pm

    Thanks for your review! <3

    Please update the previous snippet with a new one:

    add_action( 'wp_footer', function () {
    ?>
    <script type="text/javascript">
      (function($) {
        $(document).on('woobt_calc_price', function(e, total, total_ori, total_ori_regular) {
          if ((total_ori < total_ori_regular) && !$('.woobt-total-saved').length) {
            $('<span class="woobt-total-saved" style="color: green"> - Saved $' +
                Math.round(total_ori_regular - total_ori) +
                '</span>').
                appendTo('.woobt-total');
          }
        });
      })(jQuery);
    </script>
    <?php
}, 99 );

    If it still doesn't work for you, please send me your website credentials (wp-admin link, username, password) then I can check and fix it for you. You also can create a dev/staging site with the same configurations then I'll work on it.

    Best regards,
    Dustin

  •  1
    Lukas replied
    May 10, 2023 at 9:32am

    Hello Dustin

    I just noticed the following. I have 3 products for which I offer the other two as a Frequently Bought Together offer. Product A and Product B cost 79.90 each, and the reduced price is 39.90 each. Product C costs 39.90 and the reduced price is 34.90. These prices are standard in the shop, without Frequently Bought Together discounts.

    If I now set the discount for the FBT offer on the product page for product A and B (which have the same prices), a discount totaling EUR 65.70 will be calculated and displayed using the code you sent me.

    For product C, however, only a discount of EUR 40.70 is calculated and displayed.

    I want to offer these 3 products in combination on all 3 product pages for Euro 99 instead of Euro 164.70 in the FBT offer.

    The total price of EUR 99 is correct on all 3 product pages. However, the discount is different.

    Is it possible that your code doesn't always use the same price as the basis for the discount calculation?

    Or am I making a mistake in reasoning. Could you please help me?

    Here are the links to the 3 product pages.

    Product A: https://simply-great.com/luxus-silber-herz-anhaenger-damen/

    Product B: https://simply-great.com/luxus-damen-silberring-echt-925-silber/

    Product C: https://simply-great.com/luxus-schlangenkette-silber-45-cm/

    If you need admin access, I will create one for you.

    Thanks a lot for your help.
    Luke

  •  1
    Lukas replied
    May 22, 2023 at 5:57pm

    Hello ...

    Did you forget my ticket?

    Thank you for your feedback signal

    Greeting
    Luke