In the WooCommerce product edit / add new product screen, the “Publish” / “Update” button is crucial for saving changes.
However, when editing long product descriptions, adding images, or configuring variations, the button can disappear as you scroll down. This forces users to scroll back up every time they need to save, which can be frustrating and time-consuming.
A simple solution is to make the button sticky, ensuring it remains visible no matter how far you scroll. With a small CSS snippet, you can fix the button’s position in the middle of the screen, improving workflow efficiency and reducing unnecessary clicks.
In this post, I’ll share a quick code snippet that achieves this with minimal effort. Whether you’re managing a large WooCommerce store or simply looking for a more convenient editing experience, this tweak can make a big difference. Let’s dive into the code and make your “Publish” / “Update” button always accessible!
PHP/CSS Snippet: Make the Product Update Button Sticky @ Edit Product Page
/**
* @snippet Sticky update product button @ WP admin
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community https://businessbloomer.com/club/
*/
add_action( 'admin_head', 'bbloomer_admin_inline_css' );
function bbloomer_admin_inline_css() {
global $post;
if ( $post && get_post_type( $post ) === 'product' ) {
echo '<style>#publish { position: fixed; top: 50%; right: 10px; z-index: 1000; box-shadow: 0px 2px 5px black; width: 150px; }</style>';
}
}
Note: this also works for the “Publish” button @ add new product page:
Awesome thanks Rodolfo so much this is really usefull. I have updated this for other custom post types as follows and slightly changed the position:
add_action( 'admin_head', 'bbloomer_admin_inline_css' ); function bbloomer_admin_inline_css() { global $post; if ( $post && get_post_type( $post ) === 'events' || $post && get_post_type( $post ) === 'careers' || $post && get_post_type( $post ) === 'members' || $post && get_post_type( $post ) === 'product' ) { echo '<style>#publish { position: fixed; top: 7%; right: 40px; z-index: 1000; box-shadow: 0px 2px 5px black; width: 150px; }</style>'; } }Great!