修改WP Bakery主题自定义定价模块价格尺寸的技术问题

Got it, let's fix that price size issue for your custom Mikado pricing shortcode in WP Bakery. Here are a few approaches depending on how flexible you need the solution to be:

Quick Fix: Custom CSS (No Code Changes Needed) #

If you just need to adjust the size globally for all pricing items, adding custom CSS is the fastest way. First, inspect the price element in your browser to find its exact class (it's likely something like .mkd-pricing-item .mkd-price-amount). Then add this CSS to your theme's custom CSS panel, child theme's style.css, or WP Bakery's built-in custom CSS field:

/* Adjust price font size - tweak values as needed */
.mkd-pricing-item .mkd-price-amount {
    font-size: 48px; /* Use px, rem, or em based on your theme's design system */
    font-weight: 700; /* Optional: Make the price bolder */
    line-height: 1.2; /* Optional: Adjust spacing around the price */
}

Flexible Solution: Add a Custom WP Bakery Parameter #

If you want clients to adjust the price size per pricing item directly in the WP Bakery editor, you'll need to modify the shortcode's VC map and render logic:

1. Update the VC Map #

In your PricingItem class's vcMap() method, add a new parameter to the params array. This adds a field in the WP Bakery backend for setting the price font size:

vc_map( array(
    'name' => esc_html__('Mikado Pricing Item', 'your-theme-textdomain'),
    'base' => $this->base,
    // Existing VC settings...
    'params' => array(
        // Your existing parameters (title, price, features, etc.)...
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Price Font Size', 'your-theme-textdomain'),
            'param_name' => 'price_font_size',
            'description' => esc_html__('Enter a font size (e.g. 40px, 2.5rem, 120%)', 'your-theme-textdomain'),
            'group' => esc_html__('Style Options', 'your-theme-textdomain')
        ),
    )
) );

2. Modify the Shortcode Render Method #

Since your class implements Lib\ShortcodeInterface, it should have a render() method (or similar, check the interface's definition). Update the code that outputs the price to include the custom size:

public function render($atts, $content = null) {
    $default_atts = array(
        // Your existing default values...
        'price_font_size' => ''
    );
    $params = shortcode_atts($default_atts, $atts);

    // Build the price style attribute
    $price_style = !empty($params['price_font_size']) 
        ? 'style="font-size: ' . esc_attr($params['price_font_size']) . '"' 
        : '';

    // Output the price element with the style
    $output .= '<span class="mkd-price-amount" ' . $price_style . '>' . esc_html($params['price']) . '</span>';

    // Rest of your render logic...
    return $output;
}

Important Notes #

• Always use a child theme when modifying theme code—this prevents your changes from being overwritten when the parent theme updates.
• If you can't find the render() method in the PricingItem class, check the Lib\ShortcodeInterface or any parent classes it might extend (Mikado often uses a base shortcode class with render logic).
• Clear your browser cache and any WordPress caching plugins after making changes to see the updates.

内容的提问来源于stack exchange，提问作者Prabhat Gupta