Code Snippet DM
Supports: Gutenberg, Elementor, TinyMCE and shortcode Display your code snippets in a stylish way inside your content. The plugin uses shortcodes and also very intuitive TinyMCE interface. Starting with v2.0.3, the plugin offers support to be used via a custom Elementor Widget. Starting with v2.0.1, the plugin offers support to be used via a custom Gutenberg block. It will continue to support the default way of adding the code snippet via shotcodes. Code Snippet DM was inspired by the Carbon project. We created a simple way to display your code snippets but also have control over the way it appears, thus making it more stylish. Also, on the front end in the top right you will find a Copy Code button that allows you to copy to clipboard the entired code snippet. The plugin provides you with a TinyMCE button that will allow you to display the code or an option to use a shortcode. You can open the shorcode [dm_code_snippet] and in the content inside and close it [/dm_code_snippet]. Elementor widget The Widget is called “Code Snippet DM” and can be found on the Basic list of Elementor Widget after you activate the plugin. Keywords that can be used to find it: code, snippet, dm. Once the widget is added in the Elementor editor, it can be customized via the sidebar settings that will appear for each widget. The sidebar will include all the settings that are available for the shortcode. Some of the settings will be applied in real time in your editor. The code styling (syntax highlight) and line numbers are only available on the front-end, in the editor you will not be able to preview the correct colors for the code or the line numbers. Gutenberg block The block is called “Code Snippet DM” and can be found in the embed section of Gutenberg blocks. Keywords that can be used to find it: code, snippet, dm. Once the block is added in the Gutenberg editor, it can be customized via the sidebar settings that will appear for each block. The sidebar will include all the settings that are available for the shortcode. Some of the settings will be applied in real time in your editor. The code styling (syntax highlight) and line numbers are only available on the front-end, in the editor you will not be able to preview the correct colors for the code or the line numbers. Shortcode Options There are a number of options that you can use in the shortcode: background with options yes or no will enable/disable the color background (Default yes) background-mobile with options yes or no will enable/disable the color background for mobile devices (Default yes) bg-color accepts any HEX, RGB or RGBA value to change the background color (Default #abb8c3) theme with options light or dark that changes the code editor theme (Default dark) slim with options yes or no that changes the code editor from default to a slim version, ideal for one-line code (Default no) line-numbers with options yes or no that will enable a left side line number for columns (Default no) language with options clike, css, javascript, markup, perl, php, python, ruby, sql, typescript, shell will highlight the syntaxes based on what you select for your code (Default php) wrap with options yes or no will wrap the code or add a horizontal scroll bar to display it as it is (Default no) height allows you to input any value and will set the code snippet height to that value. Example: 500px. (Default is empty) copy-text this is used for the text shown on the copy button. If it’s not added it will use the default option. (Default Copy Code) copy-confirmed this is used for the text shown after you click the copy button. If it’s not added it will use the default option. (Default Copied) Example of shortcode: [dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="light" language="css" wrapped="no" height="500px" copy-text="Get the Code!" copy-confirmed="You have it!"] .dm-code-snippet.dark { background: $default-bg; padding: 40px 35px 45px 35px; margin: 30px 0; } [/dm_code_snippet] Important: * If you use the shortcode directly, make sure to wrap the code in as in the example above. * If you want to add HTML using the shortcode, you’ll need to escape the HTML before pasting it in the shortcode. (You can easily find an escape tool online to convert the code) * If you have code (not HTML) that uses ‘</’ and you add it with the shortcode and not the and the TinyMCE button, you will need to escape ‘</’ from your code in order to properly display it. Use the TinyMCE button if you don’t want to add the shortcode yourself. (see Screenshots)
Top keywords
- code31×3.85%
- default15×1.86%
- code snippet12×1.49%
- shortcode12×1.49%
- snippet12×1.49%
- dm9×1.12%
- options9×1.12%
- yes9×1.12%
- editor8×0.99%
- background6×0.74%
- button6×0.74%
- settings6×0.74%
Enhancements for WooCommerce
Replace a Long list of plugins with Enhancements for WooCommerce If you are a WooCommerce developer, your every day job is to search for snippet codes to improve WooCommerce functionality and follow your client needs, from now you can stop searching, Enhancements for WooCommerce can help you easy improve many aspects of WooCommerce, with ON – OFF functionality, you can enable as may modules as you want. If you are a simple user that you create you E-Shop by yourself, you can stop searching for plugins that do simple or even complex tasks, Enhancements for WooCommerce will help you avoid a long list of plugins, only by installing our plugin. Easy to use, clean code, lightweight, super fast. Our Free Version offers 32 modules Our Pro Version offers 27 modules You can see and buy the full version HERE FREE MODULES GENERAL SECTION Add a Second Stock Location Create a second stock location for each product. You will find the second stock location when you will edit products. This will decrease the stock quantity automatically when a order is placed. NOW FREE Catalog Mode and Enquiry Form: Activate catalogue mode for your shop and you can add an enquiry form with a shortcode in every single product page. You will need a shortcode from a form builder plugin like fluent forms. Change Add to Cart Button Text: Change the add to cart button label, this will change the button text in all archive and single product pages Variable Product Price Range Text: Change the variable product price range prefixes. For example (From 10 to 50). Works for archives and single product pages. Change Zero Prices (0.00) to Free or Other:Change the 0.00 price to a text that you prefer. For example, (Free Product). Disable Woo Cart Fragments: Disable the WooCommerce cart fragments only on the HOME PAGE of your site, great choice for speed Disable all Shipping Methods when Free Shipping is Enabled and Keep Local Pickup: Disable all shipping rates except Local pickup when free shipping is available. Used at the cart and checkout pages. CART SECTION Backorder Notification: Displays a message when at least one product in the cart is on backorder Custom Cart Message: Show a custom message in the cart. For example, a warning to your customers for something, or a general message that applies to all orders. Message on Specific Products: Show a custom message when at least one of the chosen products are in the cart. Display Order Total Weight: Show the order total weight in you cart page Display Stock Availability: Show the stock quantity on each product placed in the cart Message on Empty Cart: Show a custom message when the cart is empty. You can chose also to display some products for example products on sale. Attention this doesn\’t effect the standard WooCommerce message of empty cart. CHECKOUT SECTION Add Heading On Checkout Payment Section: Show a custom title on the checkout payment section. Change Checkout Fields Labels: Enabling this you will be able to customize your checkout field labels to meet your business needs. Shipping Heading: Replace the heading of the (Ship to a different address) text. Continue Shopping Message: Show a message and a continue shopping button on the checkout page. Move Email to Top: Move the email field to the top of the checkout form. Crucial if you want to capture emails. Remove Checkout Fields: Choose to remove billing, shipping or order comment fields as you wish. Remove Shipping Form on Local Pickup: Remove the ship to a different address section when local pick up is selected. Rename Place Order Button: Replace the place order button text at checkout page. Rename Place Order on Bacs or COD: Rename the (Place order) button according to the chosen payment method. PRODUCT ARCHIVE SECTION Message when on backorder: Show a message on the product Add to Cart button when the product is on backorder. Show Units Sold: Show how many units have been sold for every product on the archive pages SINGLE PRODUCT PAGE SECTION Add Back to Category Button: Add a button that leads to the category of the product. Auto Apply a Coupon with a Checkbox: Enable to show your customer a checkbox that will automatically apply a specific coupon code on the single product page. You will have to create a coupon for this to work. Button Text on Backorder: Change the add to cart button text when the product is on backorder. Change Related Products Heading: Change the related products heading and also create a subheading. Display (You Save) Sales Price: Display the amount of savings when there is a sales price Stock status progress bar Adds a visual progress bar to single product pages that shows how many items are left in stock. NEW Stock Quantity Suffix: Enabling this you will be able to display a suffix of the stock quantity value, for example 15 Pieces in stock ADMIN DASHBOARD SECTION Cost of Goods: Add cost of goods field to simple and variable products. NEW PRO MODULES You can see and buy the full version HERE GENERAL SECTION Multiple Stock Locations: Creates multiple stock locations for your stock management, place the name of the location you want, you do not have to name them all, only the locations that you need. NEW Add Shipping Info to Products: Show shipping info to every product and display it on the single product page and the product archives. On the product edit page, you will see a new field called Shipping Info. There, fill in your info text, for example, (4 – 5 days). The Shipping info is combined with the prefix text below. So if you write the prefix (Estimated delivery), you will get (Estimated Delivery 4- 5 days) Delete Product Images: Delete product images when you permanently delete a product. (This will not work if the product is in the trash, please delete it permanently) Estimated Delivery Dates: Show the estimated days for delivery. After enabling this, go to WooCommerce > Settings > Shipping, and edit the shipping method you like. You will find a new field called (Days to Deliver) where you can use the number of days the order will take to arrive with that shipping method. After that you will see in the cart and in the checkout page that the days were automatically calculated and shows the date of the delivery Display the Amount Saved on Cart and Checkout: Show on the cart and checkout page the amount that was saved if the customer has added one or more on sale products in their cart. CART SECTION Update cart on quantity selection: Automatically updates the cart when the user chooses a new quantity. Change (Your Cart Is Currently Empty) Text: Show your own message when the cart is empty Empty Cart Button: Creates a button with which the user can empty their cart with one click. Amount Left for Free Shipping: A Notification that displays the amount left for free shipping, according to your WooCommerce settings of free shipping. Minimum Order Amount: Show a message for minimum order amount CHECKOUT SECTION Add a Shipping Phone Field: Adds a new field for the shipping section where customer can add the phone number of the recipient. Replace State Field (Greece): Replaces the \’State\’ checkout field with Greek municipalities. This can be expanded for other countries also after request. Delivery Date and Time With this module your client can choose the delivery date and time wants the order to be delivered. NEW Fraud Protection: Enabling this you will be able to place 1 or more emails that you want to prevent placing orders on your site, this also empty the cart automatically Product Quantity at Checkout: Place a quantity selector at checkout for each product. Reorder Checkout Fields: Reorder the billing and shipping fields. Use a number as priority so that fields with lower have higher priority. PRODUCTS ARCHIVE SECTION Display A Specific Product Attribute: Display a specific attribute value on the page. Sales Ends timer: Show a sales ends timer in archive pages Display Stock Status: Show the stock status with custom text for each status SINGLE PRODUCT PAGE SECTION Turn Sales Badge to a Countdown: Replace the sales badge with a countdown timer. Products must have a schedule end date. Display Shipping Methods: Enabling this automatically the shipping methods that you have setup will be displayed on the single product page THANK YOU PAGE SECTION Place a Survey in Thank you Page: Place a survey form in the Thank you page. You will need a shortcode from a form builder plugin, for example Fluent Forms or Elementor form widget ADMIN DASHBOARD SECTION Add to Cart Click Counter: Creates a new product widget which shows how many times a product was added to the cart and its conversion rate. Display Customer Phone and Email: Enable this to display the phone number and the email on the orders table right under the order number Display Stock History: View stock status changes with dates on every product Show Total Orders by Customer: Enabling this the admin will see a column of total orders by that customer MY ACCOUNT PAGE SECTION Order Again Button: Enable this to add an order again button inside the Orders table on the (My account) page under section orders. Many more will come as the plugins develops further Grab our deal for early adopters with 50% off Today CLICK HERE