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

Okay
  Public Ticket #3235124
Change the position of the FBT product
Closed

Comments

  •  4
    [email protected] started the conversation

    Hi there,

    In the FPT list product, I want to move the product price below the product title and make the product title full width.

    Note: This adjustment will apply to desktop and tablet size

    Thanks and looking forward to your update soon.

    Regards,
    Tan Nguyen

  •  4
    [email protected] replied

    Here are the details for your reference

    Attached files:  Screenshot 2023-02-21 at 1.20.51 AM.png

  •  767
    Janilyn replied

    Hi [email protected],

    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 question 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,238
    Dustin replied

    Hi,

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

    add_action( 'wp_footer', function () {
        ?>
        <style>
            .woobt-products .woobt-product .woobt-title .woobt-price {
                width: 100%;
                max-width: 100%;
                text-align: start;
            }
        </style>
        <script type="text/javascript">
          (function($) {
            $(function() {
              $('.woobt-product').each(function() {
                var $this = $(this);
                $this.find('.woobt-price').appendTo($this.find('.woobt-title'));
              });
            });
          })(jQuery);
        </script>
        <?php
    }, 99 );

    Best regards,
    Dustin

  •  4
  •  4
    [email protected] replied

    I have another task, I want to change the color and style of the checkbox. You can check the screenshot for more details.

    Thanks and looking forward to your updates soon

    Attached files:  Screenshot 2023-02-21 at 3.56.31 PM.png

  •  1,238
    Dustin replied

    Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .woobt-choose {
        position: relative;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        z-index: 9;
    }
    .woobt-choose input {
        opacity: 0;
        width: 20px;
        height: 20px;
        z-index: 1;
        cursor: pointer;
        vertical-align: middle;
        margin: 0;
    }
    .woobt-choose .checkmark {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 20px;
        width: 20px;
        margin-top: -10px;
        margin-left: -10px;
        z-index: -1;
        background-color: white;
        border: 2px solid rgba(0, 0, 0, .3);
        display: block;
        cursor: pointer;
        border-radius: 4px;
    }
    .woobt-choose:hover input ~ .checkmark {
        background-color: #fff;
    }
    .woobt-choose input:checked ~ .checkmark {
        background-color: #fff;
        border-color: #4B2B6D;
    }
    .woobt-choose .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .woobt-choose input:checked ~ .checkmark:after {
        display: block;
    }
    .woobt-choose .checkmark:after {
        content: '';
        left: 2px;
        top: 2px;
        width: 12px;
        height: 12px;
        border-radius: 3px;
        background-color: #4B2B6D;
    }

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

    Best regards,
    Dustin

  •  4
    [email protected] replied

    Thank you so much. Everything works fine