- Requirements
- Step 1: Add the QR Code block to a page
- Step 2: Choose the QR Code Source
- Step 3: Customize the QR code design
- Step 4: Add your logo
- Step 5: Set the download file name and style the Download button
- Step 6: Publish or update the page
- Step 7: Hide the QR code on specific pages
- Frequently asked questions
The QR Code block (shown as QR Code (Composer Pro) in the block inserter) lets you add a fully styled, scannable QR code to any page, post, or product directly from the Gutenberg editor. You can generate a QR code for the current page link, a custom link or text, a phone number, WhatsApp, WiFi, Google Maps, an event, or a vCard, and customize its colors, shapes, logo, and download button without writing any code.
Requirements #
- WordPress with the Gutenberg (block) editor enabled
- The WordPress QR Code Generator plugin installed and activated
Step 1: Add the QR Code block to a page #
- In your WordPress dashboard, go to Pages → Add Page (or open any existing page or post).
- Enter a page title, for example
QR Code block. - Click the + (Block Inserter) icon, or type
/in the editor. - Search for QR Code and select the QR Code (Composer Pro) block.
A styled QR code appears in the editor together with a Download QR button.
Tip: The block uses your global design from Design QR Code in the plugin settings by default. Any change you make in the block settings overrides the global design for that QR code only.
Step 2: Choose the QR Code Source #
Select the block, then open the Block tab in the right sidebar and expand QR Code Source.
Under Source Type, choose what the QR code should open or do when scanned:
| Source Type | What it does | Fields to fill in |
|---|---|---|
| Current Page Link (default) | Automatically generates a QR code for the URL of the current page | None, it is automatic |
| Custom Link / Text / Email / Number | Encodes any link, text, email address, or number | Text, number or link |
| Phone Number | Lets people call the number after scanning | Phone / mobile number |
| Starts a WhatsApp chat | WhatsApp details | |
| WiFi | Lets people join a WiFi network without typing the password | WiFi name, WiFi type (for example, WPA), WiFi password |
| Google Maps | Opens a location in Google Maps | Latitude, longitude, query |
| Event | Lets people add an event to their calendar | Summary / title, description, start date, start time, end date and time |
| vCard | Shares digital business card details | Contact details such as website, address, and note |
The QR code in the editor updates instantly as you type.
Step 3: Customize the QR code design #
Expand the QR Code Design section in the block settings. Every option here overrides the global plugin design for this block only. Leave an option on Default (use admin setting) to keep the global style.
| Setting | Description |
|---|---|
| Shape | Overall QR code shape |
| Size (px) | Width and height of the QR code. Use Reset to return to the default |
| Body Dot Style | Style of the main dots, for example Dots |
| Body Color 1 / Body Color 2 (Gradient) | Pick two colors to create a gradient. Use the same color twice for a solid color |
| Eye Frame Style | Outer square of the three corner markers: Default, Square, Dot, or Extra Rounded |
| Eye Frame Color 1 / 2 (Gradient) | Colors of the eye frame |
| Eye Ball Style | Inner part of the corner markers, for example Dot |
| Eye Ball Color 1 / 2 (Gradient) | Colors of the eye ball |
| Background Color | Background color behind the QR code |
| Error Correction Level | Low (L), Medium (M), Quartile (Q), or High (H). Higher levels keep the code scannable even if it is partly damaged or covered by a logo |
| Border Corner Radius | Rounds the corners of the QR code |
To change a color, click the color swatch and either drag in the color picker or enter a Hex value.
Tip: Keep strong contrast between the QR code and its background. Dark colors on a light background scan most reliably.
Step 4: Add your logo #
- In QR Code Design, scroll to the Logo section.
- Click Upload Logo.
- In the Select or Upload Media window, choose an image from the Media Library (or upload a new one) and click Select.
Your logo is placed in the center of the QR code. Use Replace Logo to swap it, or Remove to delete it.
Tip: When you add a logo, use a higher Error Correction Level (Quartile or High) so the QR code stays easy to scan. Always test it with your phone.
Step 5: Set the download file name and style the Download button #
Download file name
In the Download Filename field, enter the name for the downloaded file (without the file extension, such as .png).
Download Button
Expand the Download Button section to customize the button visitors will see:
| Setting | Description |
|---|---|
| Download Button | Use the default setting or customize it |
| Button Label | The text on the button, for example Download |
| Button Text Color | Color of the label |
| Button Background | Background color of the button |
| Button Border Color | Color of the button border |
| Button Border Radius | Roundness of the button corners |
| Button Font Size | Size of the label text |
Step 6: Publish or update the page #
- Click Publish (for a new page) or Update (for an existing page).
- Click View Page to see the QR code on your website.
On the frontend, visitors can choose a format from the dropdown next to the button and download the QR code as PNG, SVG, or PDF.
For the PDF option, the button changes to Print QR. Visitors can then print the QR code or choose Save as PDF in the print window.
Step 7: Hide the QR code on specific pages #
You can control where QR codes appear in two ways.
Option A: Hide it on a single page
- Open the page in the editor.
- Click the QR Code Generator icon in the top toolbar to open the QR Code Generator panel.
- Under Remove QR Code from Frontend, select Yes.
- Click Update.
The QR code no longer appears on the frontend of that page.
Option B: Hide it by post type or page (global setting)
In the plugin settings:
- Hide QR code according to post type: select the post types where QR codes should not appear (for example Post, Page, Product, Docs, or Card).
- Hide QR code according to Page: select specific pages where QR codes should not appear.
Frequently asked questions #
Can I use more than one QR code block on the same page? Yes. Add the block as many times as you need and give each one its own source type and design.
Why does my QR code not scan? Check that the contrast between the QR code and its background is strong, increase the Size, and raise the Error Correction Level if you are using a logo.
Will changing the block design change my other QR codes? No. Settings in the block affect only that block. To change the default design for every QR code, use the plugin’s Design QR Code settings.
What happens if I leave a setting on “Default (use admin setting)”? The block uses the global design from the plugin settings.