Template of MnM Variable's UI would be best for plugin customization, and plugin upgrades

[limist]

In the current version of wc-mnm-variable, 1.0.0-rc.5, when displaying a Variation's info, the important UI elements are in the plugin's code, where modifications can be tricky, and cause problems/conflicts with future plugin updates.

The UI elements that would be better off in a template include:

1. Attribute name string (assuming it's checked in wp-admin as "Used for variations")
2. the Variation selector, currently a drop-down menu (e.g. maybe radio buttons would be better sometimes?)
3. the "Clear" link above the Variation selector (e.g. may not always want to show this)
4. Variation description/text
5. Variation price
6. the "Choose selections" instructional text
7. Category name (if the MnM option of "Allowed content" and "Select product categories" was chosen in the wp-admin side)
8. the table used to list the products (e.g. sometimes the table headers' text of "Product" should be changed)

Ideally a site admin could copy the MnM base template into their site's main (child) theme directory to do the usual override/customization of a plugin's template. HTH, thanks!

[helgatheviking]

Thanks Kai!

1. Attribute name string (assuming it's checked in wp-admin as "Used for variations")

given that the attribute name is set in the admin.... what are you looking to change?

2. The dropdown selector The goal of the dropdown is to mimic core WooCommerce as closely as possible. If I've done it right, it should semi-automatically support any decently-written swatches plugin you might want to use to replace the dropdown. I've not actually tested that yet, but that's the goal.

Also, I already do offer support for showing a small number of variations as icons. This doesn't look super impressive in my screenshot b/c they have all the same icon, but per-variation icons are supported... which would approximate a "Swatch". The styling is a bit simplistic as I don't like to enforce a lot of style rules, but there's some possibility there for customization via CSS.

The threshold is 3, but if I recall correctly you have 4... which could be tweaked like so:

function leafside_mnm_variation_swatches_threshold() {
    return 4;
}
add_filter( 'wc_mnm_variation_swatches_threshold', 'leafside_mnm_variation_swatches_threshold' );

4. Variation description/text
5. Variation price

These mimic WooCommerce core exactly... where they are also not super easy to edit. The info goes back to the woocommerce_available_variation filter and is dynamically populated when an attribute is changed and a variation is found.

The price and the description are set in the admin for each variation... what are you looking to change about that? Could it be achieved via CSS only?

6. "Choose selections" - I committed this already, but not wrapped up a new beta yet. :)

7. Category name - This is a function wc_mnm_category_caption() I might be able to pull it out into a template. What are you trying to change?

8. the table used to list the products,

this is already in a template though the titles are sent as a variable.

---

I don't suppose you have a visual mockup of what you were going for? That might help me understand better what points still need to be more flexible. But core variable/variations is already so complex and we only made it more so.

I'm trying to strike a balance between customization and letting everything be overridden in templates. they are definitely easier to use, but they come with an obligation to maintain them. I have fixed so many sites over the years due to outdated templates, so I like to encourage folks to use them as a last resort.

[limist]

@helgatheviking Thanks for the detailed follow up and explanations, going point by point...

1. Display of the attribute name: When I unchecked the box "Visible on the product page" I still saw it next to the variations' dropdown selector. I was thinking to hide it entirely, in order to have the dropdown selector take up the full width and thus be much easier to see and click on, for poor-eyesight users.
2. I'm ok without this given how you want to mimic core WooC. I'll use CSS to make the selector more prominent.
3. the Clear link, I just want to hide it to declutter the UI

4 and 5, Variation description and price: Yes, could just use CSS for these two

6: Tried following that link, that page seems blank now.

7: Category name: It would be nice (but not essential) to include additional text about particular categories, e.g. with our "Smoothies" category we'd like to remind visitors that they'll need a high-powered blender to prepare them properly. But this isn't critical.

8: Table for listing products: a nice-to-have would be overriding the generic term "Product" with something domain/store-specific like "Meal" — but this isn't essential for us.

Given the above, if it's overall easier to just use some functions (placed in our child theme or a snippet) that override the defaults, rather than pulling everything out to templates, just lemme know and we'll work with that, thanks!

[helgatheviking]

1. When I unchecked the box "Visible on the product page" I still saw it next to the variations' dropdown selector.

That's normal. Woo adds the attributes as labels to the dropdown. "Visible on the product page" means it's shown in the "Additional Information" tab or not. Labels on inputs are good for accessibility... and shouldn't stop you drop styling that dropdown as bigger if you'd like.

In theory, you should be able to use CSS to style this... but I am struggling tonight I guess.

3. Clear link

I agree that it doesn't make a ton of sense in your case where there's only 1 attribute. This should do the trick

.mnm_form .reset_variations {
  display: none;
}

6. I keep messing up my repo. good thing it's only me working in here. But it should be included in the latest beta: https://github.com/kathyisawesome/wc-mnm-variable/releases/tag/1.0.0-rc.6

7. Category descriptions.... I've opened up an issue for that under MNM

But this does work:

/**
 * Display the category descriptions in the loop.
 *
 * @since 2.4.0
 *
 * @param obj $category WP_Term
 * @param WC_Product_Mix_and_Match
 */

function wc_mnm_category_description( $category ) {
   if ( $category instanceof WP_Term && '' !== $category->description ) {
        echo '<p class="category-description">' . wp_kses_post( $category->description ) . '</p>';
   }
}
add_action( 'wc_mnm_category_caption', 'wc_mnm_category_description', 20 );

I know you aren't a fan of everything in snippets... would it help if you collect all the MNM-related snippets and put them in their own plugin?

8 table row headers "product" is generic... the pitfalls of making a plugin everyone can use. This would change the header column:

/**
 * Modify tabular column headers
 *
 * @param array $headers
 * @return array
 */
function wc_mnm_modify_column_headers( $headers ) {
    $headers['details'] = __( 'Meals', 'your-textdomain' );
    return $headers;    
}
add_filter( 'wc_mnm_tabular_column_headers', 'wc_mnm_modify_column_headers' );

I don't see how that could be pulled out into a column as currently it supports Adding and removing columns via this same filter and then the number of cells is generated by looping over this array. Probably too late to go back on that now.

Since 6 is done, and category titles/captions are in MNM itself, I am closing this.

[limist]

@helgatheviking Thanks for the updates and detailed suggestions!

For the point 6 above, could you remind/point me to how I could change the text from "Choose selections" to Choose X meals" where X = the max container size please? Thanks!

[helgatheviking]

Well I made that a template on your advice... though I think I put it in the wrong place and will probably move it later today. I think it should be single-product/mnm-variation-header.php instead of being in the mnm folder which I generally think is where the child item templates go. though i guess having everything mnm-related in the mnm makes sense too... naming things is hard!

You can switch a lot of strings via the gettext filter and add additional "case" conditions to the switch statement to target other strings.

/**
 * Change text strings
 *
 * @link http://codex.wordpress.org/Plugin_API/Filter_Reference/gettext
 * 
 * @param string $translated_text The translated text being returned
 * @param string $text The text to translate
 * @param string $domain The plugin/theme's unique identifier
 * @return string
 */
function wc_mnm_variation_cta_strings( $translated_text, $text, $domain ) {
    if ( 'woocommerce-mix-and-match-products' === $domain ) {
        switch ( $translated_text ) {
            case 'Choose %d selections' :
                $translated_text = __( 'Choose %d meals', 'yourtextdomain' );
                break;
        }
    }
    return $translated_text;
}
add_filter( 'gettext', 'wc_mnm_variation_cta_strings', 20, 3 );

[helgatheviking]

Ok, moved that template here: https://github.com/kathyisawesome/wc-mnm-variable/blob/trunk/templates/single-product/mnm-variation-header.php

[limist]

@helgatheviking Quick follow up, I'm still trying to hide that "Clear selections" link in the Mobile Styles footer, and the following didn't work:

.mnm_form .reset_variations { display: none; }

Also tried the selector of ".mnm_form .mnm_reset" with no luck. Do you recall if there's something unusual with that element, such that these more obvious selectors aren't able to target it? Thanks!

UPDATE: Got it with ,

.mnm_form .mnm_reset { display: none!important; }