Product Price Table

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #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

    #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.

    #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
    } );
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.