How to Customize Nested Shortcode Elements in Bricks Builder

You drop a shortcode into your Bricks layout. The structure panel shows a single element. But the frontend renders 50 lines of nested HTML.

You cannot click on the internal inputs. You cannot style the nested buttons. You are completely locked out of the DOM.

Here is what actually happens to your workflow when you hit this constraint. You start duplicating your Bricks styles using custom CSS selectors because you can’t inject HTML classes. You dig into third-party documentation to find obscure PHP filters just to change a text string. Things get messy.

I built Amender to solve this specific problem. It is a frontend editor that sits on top of your WordPress site and makes precise DOM changes (HTML, CSS, and JavaScript) to third-party output. You can think of it like a traditional child theme, but for any WordPress output. It inherits the parent output and applies minor alterations surgically.

Let’s consider how this actually works with some of the most common shortcode and block integrations we use with Bricks.

The WooCommerce Cart Shortcode

We will start with a classic example. You are building a checkout flow and drop the [woocommerce_cart] shortcode onto a page.

You want to change the “Apply coupon” button. Vanilla Bricks cannot touch it. With Amender, we simply open the frontend interface and select the button. We can change the text to just “Apply” and inject our existing Bricks utility classes (like bricks-button bricks-background-primary) directly into the WooCommerce HTML.

To prevent any layout flicker on these above-the-fold elements, we set the Amender event to “server-side HTML ready”. WordPress intercepts the change and applies it on the server just before sending the document to the browser.

Meta Box (MB) Views

Meta Box Views is a brilliant tool. It uses Twig and Timber to handle complex database queries that are sometimes difficult to achieve natively in Bricks.

The technical reality is that MB Views outputs a raw chunk of HTML via a shortcode. When you drop that into Bricks, you get an unstyled blob of content. The HTML output is often extremely messy.

Amender lets you visually target the MB View output in real-time. You can select individual looped items and even apply CSS Grid properties, if using the Microthemer integration. If you want a specific field to slide up when it scrolls into view, you can use the Amender AI assistant to generate a GSAP animation and apply it directly to the Twig output.

ACF Blocks and Block Studio

Both ACF Blocks and Block Studio allow developers to build custom Gutenberg blocks using PHP and HTML. They are fantastic for extending the editor.

However, when you output these blocks inside a Bricks template (or via shortcode), they act as a pre-compiled black box. You get one big chunk of stuff.

Amender is highly effective here. If you need to insert a new wrapper div around an ACF block to fix a flexbox layout issue, you do not need to rewrite the block’s PHP template. You select the element in Amender, choose the “Insert Before” or “Insert Wrapper” action, and add your custom HTML. The modification runs cleanly without touching the original plugin code.

Native Gutenberg Blocks

We frequently need to pull native WordPress the_content() into Bricks layouts for client blog posts. The resulting HTML structure from Gutenberg is notoriously cluttered.

Amender gives you a clean way to standardise this output. If a specific Gutenberg block generates a redundant heading or an empty container, you can use Amender to target that exact element and completely remove it from the DOM. This happens on the server side, meaning your users never see a flash of unwanted content.

Builderus and Cross-Builder Integrations

Builderus is an up-and-coming node-based page builder. As site architectures get more complex, we often find ourselves mixing content from different builders or migrating pieces slowly.

If you are pulling exported Builderus content into Bricks (or vice versa), you will run into the exact same locked-DOM constraints. Amender does not care what generated the HTML. As long as it renders in the browser, Amender can target the element.

Looking Past the Constraints

Anytime a shortcode outputs a large chunk of content, the existing HTML and CSS structure is usually a mess. We shouldn’t have to write custom PHP just to change a placeholder attribute.

Amender provides a clean layer to organize your own tweaks separate from the existing blob of third-party code. It handles the nitty gritty details of DOM manipulation so you can keep your Bricks structure clean.

This feels great when you are trying to keep a project moving quickly.

Want to learn more?

Amender overview