Skip to content

Usage (Advanced)

Mark Tomlinson edited this page Dec 30, 2021 · 27 revisions

Advanced usage for Markup-by-Attribute

Note: These instructions assume you have already read the basic Usage instructions, and are familiar with Markup-by-Attribute's features.

Table of Contents

Changing the style of the markup

Because the markup description is bracketed in <span> tags, CSS can be used to modify its appearance on the product page. Simply modify the ID “#mbainfo”.

Notice that after using the Set regular prices function, product variations affected by a markup will have something like the following in the description.

<span id="mbainfo">Product price $39.95
Add $2.00 for Blue
Subtract $1.00 for X-Small
</span>

We're going to change the descriptive text on the product page by adding the following to either the site's CSS or the Additional CSS in the Customize panel in the WordPress dashboard.

#mbainfo {
   color: salmon;
}

The result will be salmon colored text on the product's page.

(Click to enlarge, use [Back] to return).

Putting the markup in the attribute name

You may want to use a theme or plugin that changes the way certain options are displayed. For instance, you may have a theme that allows you to change your color option to actual color samples. Markup-by-Attribute works with these themes, but you will lose the markup that appears next to the option in the option drop-down selector. The setting Add markup to name? allows you to still display the markup as long as your theme or plugin shows the name of the option when a cursor hovers over it.

Tell Markup-by-Attribute to add the markup to the option name

The checkbox Add Markup to Name? is found near the bottom of the Add new attribute page. You can select it when creating a new attribute, if you know that you will need it.


(Click to enlarge, use [Back] to return).

Or, you can edit the attribute later and check it off if you discover it is necessary. Note that to edit an attribute, you must select [Edit] under the attribute name.


(Click to enlarge, use [Back] to return).

Updating the option names

The options with markups will not automatically rename themselves. You must update them. If you are adding the markups for the first time, the markup will be added to the option name. However, if you have already added the markup, you must go back into the options and select [Update].


(Click to enlarge, use [Back] to return).

Now, provided your theme or plugin displays the option name when the cursor hovers over it, the markup will appear on the product page, even though the drop-box selector has been replaced.


(Click to enlarge, use [Back] to return).

Note: Since this feature renames each option of an attribute, irrespective of the products that the attributes are used on, it cannot calculate the cost of the markup. For instance, assume that Blue is 2% more, which would be $0.60 for a $29.95 item. With this feature turned off, the drop-down box will read Blue (+$0.60). But with this feature turned on, you will see Blue (Add 2%).

Clone this wiki locally