Product Price Table

Top WooCommerce & WordPress Plugins › Forums › Product Price by Quantity for WooCommerce › Product Price Table

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • October 24, 2022 at 12:04 pm #94018
    Karel Pfau
    Participant

    Hi, I bought the pro version, to get a price table on the product page. I can activate the price table with this code : 

    [alg_wc_product_ppq_table  heading_format="%level_min_qty%%level_max_qty% pcs."]

    This is Ok, but I have a few problems with the table.

    1. Is it possible to get a boarder around the table?
    2. The size is very big. The table looks like strechted.
    3. Is it possible to design the tbale with codes?

    and the last one. Is it possible to place the table as a price mouse over position? So when I com with the mouse to the price, I will see the table with the pricing.

    Thanks

    Karel

    October 31, 2022 at 12:27 am #94977
    Tom Anbinder
    Moderator
    Plugin Support

    Hi Karel,

    Sorry for the late reply.

    By default, the table will have the alg_wc_product_ppq_table class, so you can easily style it with CSS, e.g.:

    .alg_wc_product_ppq_table {
    border: 1px solid black;
    width: auto;
}

    As for showing the table as a pop-up – I need to research it a bit – will get back to you asap.

    November 1, 2022 at 12:06 am #95022
    Tom Anbinder
    Moderator
    Plugin Support

    Hi again, Karel,

    I think I was able to create a pop-up table. I’m going to add it to the plugin in one of the next versions. Meanwhile, if you are ok with adding a small PHP snippet, you can achieve it with the following:

    /**
 * Wrap the product price in <div> (start).
 */
add_action( 'woocommerce_single_product_summary', function () {
    echo '<div class="alg_wc_product_ppq_popup">' . do_shortcode( '[alg_wc_product_ppq_table]' );
}, 9 );

/**
 * Wrap the product price in <div> (end).
 */
add_action( 'woocommerce_single_product_summary', function () {
    echo '</div>';
}, 11 );

/**
 * CSS.
 *
 * @see https://www.w3schools.com/css/css_tooltip.asp
 */
add_action( 'wp_head', function () {
    ?><style>
    .alg_wc_product_ppq_popup {
        position: relative;
        display: inline-block;
    }
    .alg_wc_product_ppq_popup .alg_wc_product_ppq_table {
        visibility: hidden;
        position: absolute;
        z-index: 1;
        width: 300px;
        top: 100%;
        left: 50%;
        margin-left: -150px;
        border: 1px solid black;
    }
    .alg_wc_product_ppq_popup:hover .alg_wc_product_ppq_table {
        visibility: visible;
    }
    </style><?php
} );
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.