See demo here: Click here
If you want a more "rich controlled" popup (lightbox), with cookie rules and nice setting page in WordPress where you can turn it on/off and set custom CSS and custom text then this is the post for you.
There is a reset button to reset CSS styles with predefined styles for the lightbox. You can add your own CSS if you want.
It's pretty simply. Here is the code you can insert in your code snippet plugin, or direct in your theme functions (remember to have child theme then!)
The full code is this:
// Add settings page in WordPress admin menu under Appearance
function custom_popup_settings_menu() {
add_submenu_page(
'themes.php', // Parent menu slug (Appearance)
'Popup Settings', // Page title
'Popup Settings', // Menu title
'manage_options', // Capability required to access the page
'custom-popup-settings', // Menu slug
'custom_popup_settings_page' // Callback function to display the settings page
);
}
add_action('admin_menu', 'custom_popup_settings_menu');
// Callback function to display the settings page
function custom_popup_settings_page() {
?>
<div class="wrap">
<h2>Popup Settings</h2>
<form method="post" action="options.php">
<?php
settings_fields('custom-popup-settings-group');
do_settings_sections('custom-popup-settings');
submit_button();
?>
<button type="button" id="reset-css" class="button">Reset CSS</button> <!-- Add Reset CSS button -->
</form>
</div>
<script>
document.getElementById('reset-css').addEventListener('click', function() {
var defaultCss = `
/* Overlay to dim the background */
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
z-index: 9998; /* One layer below the popup */
display: none; /* Hidden by default */
}
/* Popup styles */
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centering */
width: 400px; /* Adjusted width */
background-color: #ffffff; /* White background */
border: 1px solid #ccc; /* Light gray border */
border-radius: 10px; /* Rounded corners */
padding: 20px; /* Increased padding */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Subtle shadow */
z-index: 9999; /* On top of overlay */
}
/* Text inside popup */
#popup p {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px; /* Slightly smaller font size */
color: #333; /* Darker text color */
}
/* Close button styling */
.close-button {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #ff4081, #ff6f20); /* Gradient background */
color: white; /* White text */
border: none;
border-radius: 50%; /* Circular button */
width: 28px; /* Set width */
height: 28px; /* Set height */
padding: 0; /* Remove padding for circular shape */
display: flex; /* Flexbox for centering content */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
cursor: pointer;
font-size: 20px; /* Font size for the close icon */
transition: transform 0.2s, background-color 0.3s; /* Smooth transitions */
}
.close-button:hover {
background-color: #ff2c55; /* Darker shade on hover */
transform: scale(1.1); /* Slightly grow on hover */
}`;
document.getElementById('custom_css').value = defaultCss; // Set the CSS in the field
});
</script>
<?php
}
// Register and add settings
function custom_popup_register_settings() {
register_setting('custom-popup-settings-group', 'popup_enabled');
register_setting('custom-popup-settings-group', 'custom_text');
register_setting('custom-popup-settings-group', 'custom_css');
add_settings_section('custom-popup-settings', 'Popup Settings', 'custom_popup_settings_section', 'custom-popup-settings');
add_settings_field('popup_enabled', 'Turn on/off Popup', 'popup_enabled_field', 'custom-popup-settings', 'custom-popup-settings');
add_settings_field('custom_text', 'Text', 'custom_text_field', 'custom-popup-settings', 'custom-popup-settings');
add_settings_field('custom_css', 'CSS', 'custom_css_field', 'custom-popup-settings', 'custom-popup-settings');
}
add_action('admin_init', 'custom_popup_register_settings');
// Settings fields
function custom_popup_settings_section() {
echo '<p>Configure your popup settings here. <br />The cache expiration for the cookie <strong>popup_dismissed</strong> set by this code is 30 days. This is determined by the <em>setCookie</em></p>';
}
function popup_enabled_field() {
$popup_enabled = get_option('popup_enabled');
echo '<input type="checkbox" id="popup_enabled" name="popup_enabled" value="1" ' . checked(1, $popup_enabled, false) . '>';
}
function custom_text_field() {
$custom_text = get_option('custom_text');
echo '<textarea rows="2" id="custom_text" style="width: 300px; height: 250px;" name="custom_text">' . esc_textarea($custom_text) . '</textarea>';
}
function custom_css_field() {
$custom_css = get_option('custom_css');
echo '<textarea id="custom_css" style="width: 100%; height: 100vh;" name="custom_css" rows="5">' . esc_textarea($custom_css) . '</textarea>';
}
// Modified script and popup display function
function add_custom_popup_script() {
if (!isset($_COOKIE['popup_dismissed']) && get_option('popup_enabled')) {
$custom_text = get_option('custom_text');
$custom_css = get_option('custom_css');
?>
<style>
<?php echo $custom_css; ?>
</style>
<script>
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
document.addEventListener('DOMContentLoaded', () => {
const closeButton = document.querySelector('.close-button');
if (closeButton) {
closeButton.addEventListener('click', () => {
const popup = document.getElementById('popup');
if (popup) {
popup.remove();
}
setCookie("popup_dismissed", "true", 30);
});
}
});
</script>
<div id="popup">
<p><?php echo $custom_text; ?></p>
<button class="close-button">×</button>
</div>
<?php
}
}
add_action('wp_footer', 'add_custom_popup_script');
Remember to exclude this cookie in your cache setting/plugin if you use that stuff. This is quite necessary because if not, then the lightbox will appear no matter if you close it or not.
popup_dismissedThe cookie are saved in 30 days.
You can search for this line in the code to set another date:
"Set cookie for 30 days"
See demo here: Click here
THIS IS ONLY WORKING ON DESKTOP
Let's assume you already have Oxygen builder (Plus of cause WordPress!), and setup the theme 🙂
Then use the the main "Menu" block from Oxygen and add this CSS and JS:
Start with turning off the hover function, completely.
Use this in a code block, or in global CSS file
Maybe you should use "!important;" so it's totally fired off
/* Hide sub-menu by default */
.oxy-nav-menu .sub-menu {
display: none; /* Hide the submenu */
}
/* Disable hover effect */
.oxy-nav-menu .menu-item-has-children:hover .sub-menu {
display: none; /* Ensure submenu doesn't show on hover */
}
/* Show sub-menu when parent is active */
.oxy-nav-menu .menu-item-has-children.active > .sub-menu {
display: block; /* Show submenu when parent is active */
}
Then add this JS
document.addEventListener("DOMContentLoaded", function () {
// Get all menu items with submenus
const menuItems = document.querySelectorAll(".oxy-nav-menu .menu-item-has-children");
menuItems.forEach((menuItem) => {
// Add click event listener
menuItem.querySelector("a").addEventListener("click", function (e) {
e.preventDefault(); // Prevent default anchor behavior
// Toggle active class for submenu display
menuItems.forEach(item => {
if (item !== menuItem) {
item.classList.remove("active"); // Close other submenus
}
});
menuItem.classList.toggle("active"); // Toggle current submenu
});
});
// Close the submenu when clicking outside
document.addEventListener("click", function (event) {
if (!event.target.closest(".oxy-nav-menu")) {
menuItems.forEach(item => {
item.classList.remove("active"); // Close all submenus
});
}
});
});Do you want to add the "Schedule" options for sale price in WooCoommerce, when using quick edit?
Here is a code that works with simple products
function style_sale_price_dates_quick_edit() {
?>
<style>
.ls-display-none{
display: none;
}
.ls-schedule:hover{
cursor: pointer;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on("click",".ls-schedule",function(){
var trid=jQuery(this).closest("tr").attr("id");
jQuery("#"+trid+" div").removeClass("ls-display-none");
jQuery("#"+trid+" .ls-schedule").addClass("ls-display-none");
});
jQuery('#the-list').on('click', '.editinline', function() {
var post_id = jQuery(this).closest('tr').attr('id');
post_id = post_id.replace('post-', '');
var sale_price_dates_start = jQuery('#sale_price_dates_start_' + post_id).text();
var sale_price_dates_end = jQuery('#sale_price_dates_end_' + post_id).text();
jQuery('input[name=\'sale_price_dates_start\']', '.inline-edit-row').val(sale_price_dates_start);
jQuery('input[name=\'sale_price_dates_end\']', '.inline-edit-row').val(sale_price_dates_end);
});
})
</script>
<?php
}
add_action('admin_head', 'style_sale_price_dates_quick_edit');
add_action( 'woocommerce_product_quick_edit_start', 'ls_show_custom_field_quick_edit' );
function ls_show_custom_field_quick_edit() {
global $post;
if ($post->post_type !== 'product') return;
?>
<script>
jQuery(document).ready(function(){
var aaaa='<a hred="javascript:void(0)" class="ls-schedule">Schedule</a><div class="ls-display-none"><label><span class="title">Sale price dates</span><span class="input-text-wrap"><input type="date" name="sale_price_dates_start" class="text" value=""><input type="date" name="sale_price_dates_end" class="text" value=""></span></label><br class="clear" /></div>';
jQuery(".price_fields").append(aaaa);
});
</script>
<?php
}
add_action( 'manage_product_posts_custom_column', 'ls_show_custom_field_quick_edit_data', 9999, 2 );
function ls_show_custom_field_quick_edit_data( $column, $post_id ){
if ( 'name' !== $column ) return;
$product = wc_get_product($post_id);
$sale_start_date = $product->get_date_on_sale_from() ? date("Y-m-d",strtotime($product->get_date_on_sale_from())) : '';
$sale_end_date = $product->get_date_on_sale_to() ? date("Y-m-d",strtotime($product->get_date_on_sale_to())) : '';
echo '<div style="display:none;">Start Date: <span id="sale_price_dates_start_' . $post_id . '">' . esc_html($sale_start_date) . '</span></div><div style="display:none;">End Date: <span id="sale_price_dates_end_' . $post_id . '">' . esc_html($sale_end_date) . '</span></div>';
}
add_action( 'woocommerce_product_quick_edit_save', 'ls_save_custom_field_quick_edit' );
function ls_save_custom_field_quick_edit( $product ) {
//$post_id = $product->get_id();
if (isset($_REQUEST['sale_price_dates_start'])) {
$sale_price_dates_start = sanitize_text_field($_REQUEST['sale_price_dates_start']);
if ($sale_price_dates_start) {
$product->set_date_on_sale_from(strtotime($sale_price_dates_start));
} else {
$product->set_date_on_sale_from('');
}
}
if (isset($_REQUEST['sale_price_dates_end'])) {
$sale_price_dates_end = sanitize_text_field($_REQUEST['sale_price_dates_end']);
if ($sale_price_dates_end) {
$product->set_date_on_sale_to(strtotime($sale_price_dates_end));
} else {
$product->set_date_on_sale_to('');
}
}
$product->save();
}If you copy and paste from websites/word documents to add post and pages in WordPress, then you maybe have noticed that you are copying HTML when you insert.
Yes, there is a key on both Windows and Mac, that can remove the HTML format, but if you forget this, the mess is already being added, and you have moved on with your page so you totally forgot.
Here is an option to disable all format when you paste in the classic editor.
This is only working on the classic editor at the moment
/**
* Enable paste as text in Classic Editor and remove HTML when inserting
*/
add_filter('tiny_mce_before_init', function ($init) {
$init['paste_as_text'] = true;
return $init;
});
add_filter('wpuf_textarea_editor_args', function ($args) {
$args['tinymce']['plugins'] = 'paste';
$args['tinymce']['paste_as_text'] = true;
return $args;
});
add_action('wp_footer', 'custom_paste_as_text', 9999);
add_action('admin_head', 'custom_paste_as_text', 9999);
function custom_paste_as_text()
{
if (is_user_logged_in() && ((isset($_GET['et_fb']) && $_GET['et_fb'] === '1') || (isset($_GET['page']) && $_GET['page'] === 'et_theme_builder'))) {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
tinymce.on("AddEditor", function (e) {
setTimeout(function () {
plain_text(e);
}, 300);
setTimeout(function () {
plain_text(e);
}, 1000);
setTimeout(function () {
plain_text(e);
}, 2000);
function plain_text(e) {
try {
if (e.editor.plugins.paste.clipboard.pasteFormat.get() !== 'text') {
e.editor.execCommand("mceTogglePlainTextPaste");
var notificationButton = document.querySelector('.mce-notification button');
if (notificationButton) {
notificationButton.click();
}
}
} catch (exception) {
// Prevent JS error originating from execCommand above when tinymce does not have NotificationManager
}
}
});
});
</script>
<?php
}
}See demo here: Click here
Pretty simply script in HTML, CSS and JS
There is no cookie check, so this appear on all webpages if inserted in a header.php file, or if this is simply being injected to all pages. So beware of that. This is used to be placed on a single page to tell something quick and basic.
Here is the full code if you just want to use inline CSS and inline JS and quick resolve.
<div class="overlay" id="popup">
<div class="popup-content">
<h2>Headline</h2>
<p>Text here</p>
<button class="btn btn-primary" onclick="closePopup()">Close</button>
</div>
</div>
<style>
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.popup-content p {
color: black;
font-size: 19px;
}
.popup-content {
background: #fff;
padding: 20px;
text-align: center;
}
.buttonclass {
background: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const popup = document.getElementById("popup");
popup.style.display = "flex";
});
function closePopup() {
const popup = document.getElementById("popup");
popup.style.display = "none";
}
</script>This is pretty simply, and a needed thing for me sometimes. Despite I run from a lifeset of not including JS on a website, if I can skip it 🙂 I love performance
But this can't be done on advanced webpages sometimes, so here is a quick code so you can add script fast in theme functions without the need of a plugin
add_action('wp_head','woocommerce_js');
function woocommerce_js()
{ // break out of php ?>
<script>
SCRIPT GOES IN HERE
</script>
<?php } // break back into phpHere is a simply code inspired by: https://wordpress.org/plugins/paste-as-plain-text-by-default/
But this is a modified version more simply, and can fit you theme functions, or in code snippet so you have control over it.
Here is the code
/**
* Enable paste as text in Classic Editor
*/
add_filter('tiny_mce_before_init', function ($init) {
$init['paste_as_text'] = true;
return $init;
});
add_filter('wpuf_textarea_editor_args', function ($args) {
$args['tinymce']['plugins'] = 'paste';
$args['tinymce']['paste_as_text'] = true;
return $args;
});
add_action('wp_footer', 'custom_paste_as_text', 9999);
add_action('admin_head', 'custom_paste_as_text', 9999);
function custom_paste_as_text()
{
if (is_user_logged_in() && ((isset($_GET['et_fb']) && $_GET['et_fb'] === '1') || (isset($_GET['page']) && $_GET['page'] === 'et_theme_builder'))) {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
tinymce.on("AddEditor", function (e) {
setTimeout(function () {
plain_text(e);
}, 300);
setTimeout(function () {
plain_text(e);
}, 1000);
setTimeout(function () {
plain_text(e);
}, 2000);
function plain_text(e) {
try {
if (e.editor.plugins.paste.clipboard.pasteFormat.get() !== 'text') {
e.editor.execCommand("mceTogglePlainTextPaste");
var notificationButton = document.querySelector('.mce-notification button');
if (notificationButton) {
notificationButton.click();
}
}
} catch (exception) {
// Prevent JS error originating from execCommand above when tinymce does not have NotificationManager
}
}
});
});
</script>
<?php
}
}
Do you want to have a fully customized close button in Off Canvas Navigation using Oxygenbuilder and OxyExtras - then here is a quick guide for that:
See this GIF for an example:
The little white close icon, is made with HTML and a SVG file. Pretty simply.
Here is this HTML:
<a href="#" id="closeOffCanvasButton">
<img src="SOURCE FOR SVG FILE" />
</a>And then I'm using Oxygenbuilder for creating the Off Canvas Menu, with the OxyExtras extension
So this jQuery is working, if you are using OxyExtras, and creating Mega Menu and Off Canvas Menu.
Note that this jQuery is only doing what the native close button from OxyExtras is doing, but this close button is more controllable - so it's possible to add it where you want.
jQuery(document).ready(function ($) {
// Function to close off-canvas menu
function closeOffCanvas() {
// Hide the off-canvas menu and backdrop
$('#off-canvas-main').removeClass('oxy-off-canvas-toggled');
$('.oxy-offcanvas_backdrop').fadeOut();
// Set aria-expanded attribute to false on the burger trigger button
$('#burger-trigger button').attr('aria-expanded', 'false');
// Enable scrolling on the body
$('body').removeClass('oxy-offcanvas-open off-canvas-toggled toggledoff-canvas-main');
$('html').removeClass('off-canvas-toggled toggledoff-canvas-main');
}
// Add click event listener to the custom close button
$('#closeOffCanvasButton').on('click', function (event) {
event.preventDefault(); // Prevent the link from navigating if needed
closeOffCanvas();
});
// Add click event listener to the burger trigger button
$('#burger-trigger button').on('click', function () {
// Set aria-expanded attribute to true when opening the off-canvas
$(this).attr('aria-expanded', 'true');
});
});Important
Remember to change toggledoff-canvas-main and #off-canvas-main with the Class and ID from Oxygen. These might be autogenerated so there is a -3453 something at the end.
I have customized every Class and ID in Oxygen, so there is some niceness to it.
If you want to remove the native close button, then this CSS can work:
body.off-canvas-toggled div#burger-trigger {
display: none;
}Just found some of my old images in some backup. Not that backup has been a number 1 choice from me in the beginning, wonder who at that time...?
But due to the fact that this gave me some nostalgic feeling, i ended up deciding that this should be on my site. So here it is.
Backup
Hmm....
Maybe it was because of backup I thought that in 2007 or something i should never touch a computer again.
Ohh boy I was wrong
Let's not dive to much into that thing about backup, but my girlfriend destroyed my
hard drive (by accident of cause I know now, not at that moment i knew) and after that I went offline for a few years.
On that hard drive there was all my work, and my future work I was planning. All of that was lost.
Anyways. Let's skip all the rest negative stuff, I've moved on.
But there was a lot of things going on in that period. Also some good stuff!!! (The love of my life x2)
So here is there something, just something I have collected.
This was the most important stuff. I remember I was very sad at that time all was lost, but life's continue, haaa?
Maybe some day I will tell about OneSite (A time Before Facebook and Without Facebook)
Mr-Fister.dk
This was my first (or second, or third) website I built when I was a youngster.
It was my first work made from scratch in HTML/CSS and PHP - just in notepad (without syntax highlighting and shiiit!)
Before, it was Microsoft Frontpage and "webbyen" or "123hjemmeside" 🙂
Yes, we have all been there! And sorry for the name "Fister" this was before i knew
It was actually pretty big at that time, and very active.
More than 1500 users registered, and a lots of forum/news comments.
That shit went down dog!
Pages-Online.dk
My first serious business in web development. Together with 2 others here in Denmark.
We got clients, I was 15 years old, and life was just started for me.
But there was something else that was more interesting, just put it that way heh
Our clients was:
- Data-house.dk
- Tweak.dk
- DayofDefeat.dk
- HardwareOnline.dk
- ...and a bunch of CS/DOD clans 🙂
At the same time I was also a writer on Tweak.dk and DayofDefeat.dk
and together with some "Online friends" we ended up making cool projects.
Casemodding
Something i made 🙂
I helped at a local school to "case-mod" (decorate) one's computer.
Together with a good friend, just because we were older than the others 🙂
We didn't have a clue, and we were maybe those 16-17 years old.
Had responsibility for a lot of 12 year olds. It was fun, but irresponsible!
Got into an issue with a client today, and found this article to get what I want. But it was not complete for me.
I want to disable payment, disable shipping, disable subtotal, and replace with a text box, if there was more than 5 products in cart. On top of that, I want to do the same just with 2 products in cart, for a custom category. This is done with this PHP snippet, that goes into functions. If you got any issues, please write to me and I will help with the code. It's pretty complex 🙂
Steps:
- Get your shipping zone and replace it(in this code example "flat_rate:4")
- Adjust $max_allowed_products = 5; with the suited number for you on all category
- Adjust $max_allowed_products = 2; with the suited number for you in custom category "bundle"
- Change the category you want to allow max 2 (in this example bundle)
- Change the text <p>Contact us for more information about purchasing and shipping price for this order.</p>
// Disable payment for flat_rate:4 and adjust based on product category
function disable_payment_for_flat_rate_4($needs_payment) {
// Check if WooCommerce is active
if (class_exists('WooCommerce')) {
// Check if flat_rate:4 is selected as the shipping method
$chosen_shipping_method = WC()->session->get('chosen_shipping_methods');
if (in_array('flat_rate:4', $chosen_shipping_method)) {
// Get the cart contents
$cart_contents = WC()->cart->get_cart_contents_count();
// Set the maximum allowed products
$max_allowed_products = 5;
// Check if there are products in the "bundle" category
$bundle_category_products = false;
foreach (WC()->cart->get_cart() as $cart_item) {
$product_id = $cart_item['product_id'];
$product_categories = get_the_terms($product_id, 'product_cat');
// Check if the product belongs to the "bundle" category
if ($product_categories && is_array($product_categories)) {
foreach ($product_categories as $category) {
if ($category->slug === 'bundle') {
$bundle_category_products = true;
break;
}
}
}
}
// Adjust the maximum allowed products if there are products in the "bundle" category
if ($bundle_category_products) {
$max_allowed_products = 2;
}
// If the cart contains more than the allowed products, disable payment
if ($cart_contents > $max_allowed_products) {
$needs_payment = false;
// Enqueue the custom JavaScript
add_action('wp_footer', 'disable_place_order_button_script');
}
}
}
return $needs_payment;
}
// Hook the function to the 'woocommerce_cart_needs_payment' filter
add_filter('woocommerce_cart_needs_payment', 'disable_payment_for_flat_rate_4', 10, 1);
// Enqueue custom JavaScript to replace "Place Order" button with custom text
function disable_place_order_button_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// Delay the execution to ensure the "Place Order" button is fully loaded
setTimeout(function(){
// Remove the "Place Order" button and replace it with custom text
$('.form-row.place-order').html('<p>Contact us for more information about purchasing and shipping price for this order.</p>');
}, 1000); // Adjust the delay time as needed
});
</script>
<?php
}
// Enqueue custom CSS to hide label for flat_rate:4 shipping method
function disable_label_for_flat_rate_4_style() {
// Check if flat_rate:4 is selected as the shipping method
$chosen_shipping_method = WC()->session->get('chosen_shipping_methods');
if (in_array('flat_rate:4', $chosen_shipping_method)) {
// Get the cart contents
$cart_contents = WC()->cart->get_cart_contents_count();
// Set the maximum allowed products
$max_allowed_products = 5;
// Check if there are products in the "bundle" category
$bundle_category_products = false;
foreach (WC()->cart->get_cart() as $cart_item) {
$product_id = $cart_item['product_id'];
$product_categories = get_the_terms($product_id, 'product_cat');
// Check if the product belongs to the "bundle" category
if ($product_categories && is_array($product_categories)) {
foreach ($product_categories as $category) {
if ($category->slug === 'bundle') {
$bundle_category_products = true;
break;
}
}
}
}
// Adjust the maximum allowed products if there are products in the "bundle" category
if ($bundle_category_products) {
$max_allowed_products = 2;
}
// If the cart contains more than the allowed products, enqueue the custom CSS
if ($cart_contents > $max_allowed_products) {
?>
<style type="text/css">
table.shop_table.woocommerce-checkout-review-order-table {
display: none;
}
</style>
<?php
}
}
}
// Hook the function to the 'wp_head' action
add_action('wp_head', 'disable_label_for_flat_rate_4_style');