如何在WordPress(WooCommerce)Storefront主题头部添加按钮

Hey there! I’ve tinkered with Storefront theme a bunch for WooCommerce projects, so let me share the cleanest, update-safe way to add a header button—no messy edits to core theme files required.

Skip Editing header.php—Use Hooks Instead #

Directly modifying header.php is risky because theme updates will wipe out your changes. Storefront has built-in hooks made exactly for this kind of customization. Here are the best ones to use:

• storefront_header_top: Adds content to the top bar area (above the logo/menu)
• storefront_header: Inserts content into the main header section (next to logo/menu)
• storefront_after_header: Places content right below the header

Step 1: Add the Button Code to Your Child Theme #

First, make sure you’re using a child theme (if you aren’t, set one up first—it’s non-negotiable for safe customizations). Open your child theme’s functions.php file and add this code:

// Add custom header button
function custom_storefront_header_button() {
    // Replace the URL and button text with your own
    ?>
    <a href="your-target-url-here" class="custom-header-btn">Your Button Text</a>
    <?php
}
// Adjust the priority number to move the button around
// 10 = before logo, 15 = between logo and menu, 30 = after menu
add_action( 'storefront_header', 'custom_storefront_header_button', 30 );

Step 2: Style the Button with CSS #

Next, open your child theme’s style.css file to make the button look good and fit with Storefront’s design:

.custom-header-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #21759b; /* Matches Storefront's default blue */
    color: #ffffff;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 600;
    align-self: center;
    margin-left: 15px;
}

/* Hover effect */
.custom-header-btn:hover {
    background-color: #1a5f7a;
    color: #ffffff;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .custom-header-btn {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }
}

Tweak the Position #

If you want the button in a different spot, just change the hook or priority:

• To put it in the top bar: Replace storefront_header with storefront_header_top
• To move it before the menu: Lower the priority to 15 (since the menu uses priority 20)
• To put it above the header entirely: Use storefront_before_header

This method keeps your changes safe through theme updates and gives you full control over the button’s placement and style.

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