Okay
  Public Ticket #3418698
3 question of Tier table
Closed

Comments

  • kornchai started the conversation

    1. How to custom color for only Tier table, No on WooCommerce other table ?

    1.1 Color of text Product Quantity

    1.2 Color of text Price per Unit

    1.3 Color of Quantity

    1.4 Color of Price


    2. I use WPML, But I can't find How to translate Product Quantity and Price per Unit.


    3. How I submit feature request ?

    3.1 For Tier table, I need each product can change text of Product Quantity and Price per Unit


    Best regards

    Attached files:  การจับภาพเว็บ_20-7-2023_22857_ttr.bbspaceapps.com.jpeg

  •  2,214
    WebWizards replied

    Hello Kornchai,

    (1) To change those colors, you can add this CSS to your site:

    /* Product Quantity Text Color */
    .b2bking_tiered_price_table thead tr th:nth-child(1) {
        background: #ff7f51;
    }
    /* Price Per Unit Text Color */
    .b2bking_tiered_price_table thead tr th:nth-child(2) {
        background: #5e9ea0;
    }
    /* Product Quantity Column Color */
    .b2bking_tiered_price_table tbody tr td:nth-child(1) {
        background: white;
    }
    /* Price Per Unit Column Color */
    .b2bking_tiered_price_table tbody tr td:nth-child(2) {
        background: #5e9ea0;
    }
    

    It will look like this on your site:

    9927472850.png



    (2) These texts should be translateable like any other text in the plugin.

    We would advise to try to follow the steps here: https://wpml.org/documentation/getting-started-guide/string-translation/finding-strings-that-dont-appear-on-the-string-translation-page/


    Or if you would like to share a backend login to your site or a staging site with us, we can check this directly on your site to troubleshoot and get this resolved for you,


    (3) For feature requests you can simply open tickets here with us.

    Thank you for the suggestion. 

    Right now we do not have any feature to have a different text for each product there.


    It is possible with PHP code snippets if you want to do this with custom coding. 


    Kind regards,

    Stefan

  • kornchai replied

    Hello,

    I need more help of CSS.

    1. How to change hover color ?

    2. How to add border ? I try to add border but not show it (in attach image).

    3. Can we add css even and odd color ?

    4. How to css text to center ?

    5. Can we add Title Tier Table like attach image ?

    6. Can we change Tier table to horizontal ?

    Best regards

    Attached files:  tier-css.jpg
      tier-title-demo.jpg

  •  2,214
    WebWizards replied

    (1) Do you mean the Blue Color here?

    3842563367.png

    You can add:

    body table.b2bking_tiered_price_table tbody td.b2bking_has_color {
        background: #2a5a51 !important;
    }
    

    9929127031.png

    (2) A border where? I don't think I understand. Can you show a screenshot with a drawing please?


    (3)  For example you can have:

    .b2bking_tiered_price_table tbody tr:nth-child(even) td:nth-child(1) {
        background: red;
        border: 1px;
        border-color: #c8c8c8;
    }
    .b2bking_tiered_price_table tbody tr:nth-child(odd) td:nth-child(1) {
        background: blue;
        border: 1px;
        border-color: #c8c8c8;
    }
    

    (4) To center CSS, you can add:

    .b2bking_tiered_price_table tr th, .b2bking_tiered_price_table tr td {
        text-align: center;
    }
    

    But it does not work very well.

    I think it is better to add:

    .b2bking_tiered_price_table thead tr th:nth-child(1) {
        padding-left: 15px;
    }
    .b2bking_tiered_price_table tbody tr td:nth-child(1) {
        padding-left: 15px;
    }
    

    3386978096.png

    (5)  You can add:

    .b2bking_tiered_price_table {
        margin-top: 0px !important;
    }
    

    and add this PHP code snippet:

    add_action('wp_head', function(){
       ?>
       <script>
        jQuery(document).ready(function(){
            jQuery('<div style="margin-bottom:0px;border: 2px solid red;text-align: center;margin-top: 30px;">Tier Table Title</div>').insertBefore('.b2bking_tiered_price_table');
        });
       </script>
       <?php 
    });
    

    (6) This is very hard to achieve unfortunately. It would not work together with the other snippets.

  • kornchai replied

    Thank a lot for last answer.

    (1) A border where? I don't think I understand. Can you show a screenshot with a drawing please?


    (2) How to add snippet code to add text after number of Product Quantity ?


    (3) What css class for information table ?


    Best regards

    Attached files:  tier-table.jpg

  •  2,214
    WebWizards replied

    Hi,

    (1) 

    How to add border ? I try to add border but not show it (in attach image).

    I just meant: where do you want this border? It would help if you have a screenshot or an example, etc.


    (2) You can add some text there after quantity, with this snippet:

    add_action('b2bking_tiered_table_after_quantity', function($product_id){
        echo ' test';
    }, 10, 1);
    

    (3) You can use the class 

    .b2bking_information_table

    to target the information table

  • kornchai replied

    Hi,

    (1) 

    How to add border ? I try to add border but not show it (in attach image).

    I just meant: where do you want this border? It would help if you have a screenshot or an example, etc.


    Border on tier table.

    I have attachment image, But I not sure it not show ?

    I have upload on this too: tier-table.jpg


    Best regards

    Attached files:  tier-table.jpg

  •  2,214
    WebWizards replied

    You can add a border to the tiered table with this CSS:

    .b2bking_tiered_price_table, .b2bking_tiered_price_table td, .b2bking_tiered_price_table th {
        border: 2px solid #747474 !important;
    }
    

    3705166046.png
  • kornchai replied

    Hello,

    How to setting width of first column of information table ?

    I want to 50/50.

    screenshot-ttr-bbspaceapps-com-2023-08-14-04-53-05.png

    Best regards

    Attached files:  screenshot-ttr.bbspaceapps.com-2023.08.14-04_53_05.png

  •  2,214
    WebWizards replied

    Hi,

    You can do that by adding this CSS to your site:

    .b2bking_information_table tbody tr td:nth-child(1) {
        padding-left: 15px;
        width: 50%;
    }
    
  • kornchai replied

    Hello,

    link: ESET File Security for Windows Server - 1 Year - ขายวินโดว์แท้ จำหน่าย Microsoft Windows Office แท้ 100% (dedeecom.com)

    question

    1. How to move tier table to on cart

    2. How to change text color for normal and active (attach image)

    Now I can change color on normal text product quantity and discount but can't change color on active text product quantity and discount.

    And I can't change color on normal and active text price per unit.

    3. If I want change text (product quantity, discount, price per unit), How to change it ?


    Best regards

  • kornchai replied

    Forget to add image.

    Attached files:  screenshot-1709878597342.png

  •  2,214
    WebWizards replied

    Hi there,


    (1) This is a bit unclear to me: Are you trying to show the tiered price table for each product on the cart page?

    Generally, it makes things a bit complicated, B2BKing was not built to have this feature. But you can do it by adding this PHP code snippet to your site:

    add_filter('woocommerce_cart_item_price', function($price, $cart_item, $cart_item_key){
        ob_start();
        echo do_shortcode('[b2bking_tiered_pricing_table id='.$cart_item['product_id'].']');
        $table = ob_get_clean();
        return $price.$table;
    }, 10, 3);
    

    It will then show as:

    1009897732.png

    Please note that the "Active price" range does not work here - because this was only built to work on the single product page.



    (2) Generally you can make changes there with CSS.

    I will show a few examples on my local test site:

    First I have this product page and table:

    5612861332.png

    You can add this CSS to set the colors for the different columns:

    .b2bking_tiered_price_table td:nth-child(1), .b2bking_tiered_price_table td:nth-child(2) {
        color: red;
    }
    .b2bking_tiered_price_table td:nth-child(3) {
        color: green;
    }
    

    It results in:

    4445528455.png

    If you would like to set other colors for the active price, you can further add this CSS:

    table.b2bking_tiered_price_table tbody td.b2bking_has_color:nth-child(1), table.b2bking_tiered_price_table tbody  td.b2bking_has_color:nth-child(2) {
        color: purple !important;
    }
    table.b2bking_tiered_price_table tbody td.b2bking_has_color:nth-child(3) {
        color: red !important;
    }
    

    Now the table becomes:

    6849831552.png



    (3) To change those texts to something else, you can follow our guide here: https://woocommerce-b2b-plugin.com/docs/how-to-edit-any-plugin-text-string-same-language

    This works for any text in the plugin. I see that you have already managed to edit those:

    7590799721.png



    Kind regards,

    Stefan