Okay
  Public Ticket #2561367
Product Attributes custom placement
Closed

Comments

  •  2
    Solarside started the conversation

    Hello,

    I'm using Kalium (store template) for several years to run my record shop and totally happy with everything. All works great and smooth so far, thank you!

    Recently I decided to re-design my store slightly to make it more user friendly.
    But I'm not experienced coder and need your assistance. 

    Single product page.

    1.  I want to add product attribute before the product title and make it look like this pa_attribute - product title 

    If the product has more than one attribute's value to be shown: 

    pa_attribute value 1 / pa_attribute value 2 - product title

    Post just product title if the product has no attributes defined. 

    2. I would love to remove remaining product attributes from the bottom and place this section below product title, preferably in two columns. I have tried to apply code found here and several related plugins but no luck (

    3. I use short description section to place audio preview players. If there are many tracks you have to scroll down a lot to see the price and 'add to cart button' which is not great. 

    I found a solution and use playlists instead of single player for each track. But the problem is that in this case WP use basic audio-player not the Kalium one comes with the theme. You can see example here https://store.mixedemotions.ru/product/loud-e-spaceman-ohne-boone-a-drop-of-blue-thee-j-johanz-ext-edit/

    Please let know how to fix?

    Product view in catalog mode.

    Any chance to add some attributes placed in two columns below the product picture?  Like this:

    product title            price
    pa_attribute 1         pa_attribute 3
    pa_attribute 2         add to cart 


    Thank you in advance for your help and assistance!

  •  1,558
    Laborator replied

    Hi Solarside,

    1. I am sorry but this is out of the support scope, if you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.

    2. If you want to hide the tabs completely, add this CSS to Custom CSS:

    .single-product .woocommerce-tabs {
        display: none;
    }
    

    3. Can you please share your site credentials here, because we need to login to your site and see this issue live. Your information is safe (private) in this thread.

    To include your credentials click Insert Credentials button in editor toolbar. (See how)

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •   Solarside replied privately
  •  1,558
    Laborator replied

    Hi Solarside,

    I have discussed this with the team and it seems that the playlist is not supported with layout of the audio and video script of the theme, I have added it in the to-do list for the upcoming updates but I can't give you any expected date when it will be implemented.

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •  2
    Solarside replied

    Hey Art,

    Ok, understood... So you won't help for my other points?

  •  1,558
    Laborator replied

    Regarding other points as you can see I answered in my previous replies, the first question is a customization and for the second question I have provided a CSS.

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •  2
    Solarside replied

    Hey Art,

    You missed the last one: i want to show a few attributes below the title on catalog mode/archive pages like in your bookstore theme template ('author' attribute). Any chance you could provide the code for this? 

  •  1,558
    Laborator replied

    Hi again,

    I can only give you the code which we have used in Bookstore demo to show the Book Author attribute, so you can change the slug of the attribute and get the results you want, you will need to paste the following PHP code under the functions.php of your child theme:

    /**
     * Filter attributes and show author attribute only.
     *
     * @param array $attributes
     *
     * @return array
     * @see _kalium_show_author_attribute()
     */
    function _kalium_woocommerce_product_get_attributes_author_only( $attributes ) {
        $author_attr_name = wc_attribute_taxonomy_name( 'book-author' );
        $author_attribute = [];
        if ( isset( $attributes[ $author_attr_name ] ) ) {
            $author_attribute[ $author_attr_name ] = $attributes[ $author_attr_name ];
        }
        return $author_attribute;
    }
    /**
     * Show book author attribute.
     */
    function _kalium_show_author_attribute() {
        global $product;
        // Add filters to return only author from attributes array
        add_filter( 'woocommerce_product_get_attributes', '_kalium_woocommerce_product_get_attributes_author_only' );
        add_filter( 'wc_product_enable_dimensions_display', '__return_false' );
        // Display author attribute
        wc_display_product_attributes( $product );
        // Remove filters to return only author from attributes array
        remove_filter( 'woocommerce_product_get_attributes', '_kalium_woocommerce_product_get_attributes_author_only' );
        remove_filter( 'wc_product_enable_dimensions_display', '__return_false' );
    }
    add_action( 'woocommerce_product_meta_start', '_kalium_show_author_attribute', 25 );
    add_action( 'kalium_woocommerce_product_loop_after_title', '_kalium_show_author_attribute', 10 );
    

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •  2
    Solarside replied

    Hi Art,

    Thanks, code you have provided below works but not as on bookstore template, I guess there are some issues with styles or ...? Please check attached pictures. As you can see, it shows attribute name (Artist) and attribute placement is slightly out line.

  •  1,558
    Laborator replied

    Hi again,

    Can you try adding this CSS to Custom CSS:

    /* Homepage: Selected book add colon after author */
    .woocommerce .summary .product_meta .shop_attributes th:after {
        content: ":";
    }
    /* Shop: Hide product author label */
    .woocommerce .products .product .item-info .shop_attributes th {
        display: none;
    }  
    /* Shop: Product author text color */
    .woocommerce .products .product .item-info .item-info-row table td a {
        color: #7d7770;
    }
    /* Shop: Product author underline  */
    .woocommerce .products .product .item-info a:after {
        left: 50%;
        background: #CCC;
        display: block;
    }
    /* Shop: Product author underline  */
    .woocommerce .products .product .item-info a:hover:after {
        left: 0%;
    }
    /* Shop: Product author underline on hover */
    .woocommerce .single-product--product-details>.product .summary {
        padding-top: 30px;
    }
    /* Product: Attributes table width  */
    .woocommerce .woocommerce-tabs .entry-content .shop_attributes {
        width: 100%;  
    }
    /* Product: Attributes table title width  */
    .woocommerce .woocommerce-tabs .entry-content .shop_attributes tbody th {
        width: 20%;
    }
    /* Product: Attributes table list padding  */
    .woocommerce .woocommerce-tabs .entry-content .shop_attributes td {
        padding: 10px 0; 
    }
    /* Product: Attributes table row border  */
    .woocommerce .woocommerce-tabs .entry-content .shop_attributes tr {
        border-bottom: 1px solid #EEE;
    }
    /* Product: Attributes table title color  */
    .woocommerce .summary .product_meta .shop_attributes th {
        color: #898989;
        font-weight: normal;
    }
    /* Product: Attributes table text spacing  */
    .woocommerce .summary .product_meta .shop_attributes td p {
        margin: 0px;
        margin-left: 5px;
    }
    

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •  2
    Solarside replied

    Hey Art,

    Thank you, now all works as it should!